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：

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

VueJS数组项上的虚拟字段

1 个答案: