Виртуальное поле VueJS на элементе массива

Я строю что-то с 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, которые объясняют проблему:

1 ответ

  1. Ознакомьтесь с документами по жизненному циклу vue :

    id предпочитает, чтобы список был вычисляемым свойством, которое всегда проверяет наличие возвращаемых элементов: ie ,

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