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

Question

这是一个

//---模板--
<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 这样。

Answer 1

简单的实现方式是：

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];
    }
}

Answer 2

查了好久，我这样实现的。之前对问题没有表达清楚。

 //调用
<select-custom id="select1" :selectedItems="['Foo1','Foo2']" ></select-custom>
<select-custom id="select2" :selectedItems="['Bar1','Bar2']" ></select-custom>
//模板
<div class="proPaneSelect">
    <button class="proPanelBtn" @click="toggleListHandler">设置表头<span>◢</span></button>
    <ul class="proPaneUl" style="display: block">
        <li v-for="item in items">
            {{ item }}
        </li>
    </ul>
</div>
//注册
 Vue.component('select-custom', {
        template: System.getTxt('./proPanel/selectUI.html'),
        data: function () {
            return {
                items: this.selectedItems
            };
        },
        props: {
            id: String,
            selectedItems:Array
        }
    });

Answer 3

使用vue的set方法，
Vue.set(this.data,'items',items2)