javascript - vue v-for ul 组件的数组数据如何动态赋值

问题描述

问 题

这是一个

//---模板--
<div class="proPaneSelect">
    <button class="proPanelBtn">设置表头<span>◢</span></button>
    <ul class="proPaneUl" style="display: block">
        <li v-for="item in items">
            {{ item.message }}
        </li>
    </ul>
</div>
//注册 
 Vue.component('select-custom', {
        template: System.getTxt('./proPanel/selectUI.html'),
        data: function () {
            return  {
                items: itemsPrivate
            };
        }
    });

var items1 = [

    {message: 'Foo1' },
    {message: 'Bar1' }
];
var items2 =  [
    {message: 'Foo2' },
    {message: 'Bar2' }
];

希望 itemsPrivate数组 可以自由赋值使ul的内容 例如，itemsPrivate = items1 这样。

解决方案

简单的实现方式是：

Vue.set(this.$data,'items',items2)

还有一种方式：

// html
<li v-for="item in someItems">
    {{ item.message }}
</li>
// Vue
data:function(){
    return {
        itemsSource:"items1",
        itemsArray:{
            items1:[{message:'Foo1'},{message:'Bar1'}],
            items2:[{message:'Foo2'},{message:'Bar2'}]
        }
    };
},
computed:{
    someItems:{
        return this.itemsArray[this.itemsSource];
    }
}

这篇关于javascript - vue v-for ul 组件的数组数据如何动态赋值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！