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 
    } 
    } 
})