VueJS在阵列项目

Question

我建立与VueJS东西，我有一些问题，在列表中选择一个项目虚拟领域：

让我们想象一下以下VueJS组件：

new Vue({ 
    el: '#app', 
    data: { 
    list: [ 
     { 
     id: 1, 
     title: 'My first Item', 
     selected: false 
     }, 
     { 
     id: 2, 
     title: 'My second Item', 
     selected: false 
     } 
    ] 
    } 
}) 

随着selected财产，我可以申请一个类或不相符的项目：

<div id="app"> 
    <ul> 
    <li @click="item.selected = !item.selected" :class="item.selected ? 'active' : ''" v-for="item in list">{{ item.title }}</li> 
    </ul> 
</div> 

但现在，让我们想象一下，我抓住从一个API我的数据，我还是希望能够选择的项目：

new Vue({ 
    el: '#app', 
    data: { 
    list: [] 
    }, 
    created: function() { 
    // Let's imagine that this is an Ajax Call to a webservice 
    this.$set('list', [ 
     { 
     id: 1, 
     title: 'My first Item' 
     }, 
     { 
     id: 2, 
     title: 'My second Item' 
     } 
    ]) 
    } 
}) 

现在，我的html无法工作了，因为数据没有选定的属性。

那么我该怎么做这样的事情呢？

这里有两个的jsfiddle解释这个问题：

• The working one
• The non working one

Answer 1

请仔细阅读VUE生命周期文档：

ID喜欢你设置列表是计算属性，总是检查返回的项目：即，

new Vue({ 
    el: '#app', 
    data: { 
    list: [] 
    }, 
    computed: { 
    list(){ 
    // Let's imagine that this is an Ajax Call to a webservice 
    let returned = [ 
     { 
     id: 1, 
     title: 'My first Item' 
     }, 
     { 
     id: 2, 
     title: 'My second Item' 
     } 
    ] 
    return returned 
    } 
    } 
})