Попытка изменить свойство объекта и сохранить реактивность.Свойство или метод "vm" не определен в экземпляре, но на него ссылаются во время рендеринга

Question

До сих пор я пытался изменить значение свойства объекта на false, используя @click='review.isActive = true', однако оказалось, что Vue не может обнаружить такие изменения, что означает, что свойство не будет реактивным.

На основании документации https://vuejs.org/v2/guide/list.html#Caveats, этого можно избежать, используя один из следующих методов:

Vue.set(vm.reviews, index, true)

vm.reviews.splice(index, 1, true)

К сожалению, я получаю ошибку, используя любой способ. Я предполагаю, что не совсем понимаю, как работает экземпляр Vue, и я пытаюсь получить к нему доступ, когда не могу.

Я предполагаю, что Vue / vm должен быть экземпляром Vue, но я не могу получить к нему доступ.

В обоих случаях я получаю сообщение об ошибке "Свойство или метод" vm "/" Vue "не определен в экземпляре, но на него ссылаются во время рендеринга."

Я использую простой шаблон веб-пакета Vue webpack, и мой экземпляр Vue, похоже, инициализируется в файле main.js следующим образом:

var vm = new Vue({
    el: '#app',
    router: router,
    store: store,
    render: h => h(App)
});

Файл, в котором происходит манипулирование массивом, отличается и является компонентом.

Answer 1

Предполагая, что ваш review объект является элементом в вашем массиве reviews, и что у него изначально нет свойства isActive, но вы хотите добавить его, вы можете использовать vm.$set для добавления нового реактивного объекта. свойство.

Например

new Vue({
  el: '#app',
  data: {
    reviews: [{
      id: 1,
      name: 'Review #1'
    },{
      id: 2,
      name: 'Review #2'
    },{
      id: 3,
      name: 'Review #3'
    }]
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <div v-for="review in reviews" :key="review.id">
    <p>
      Review {{ review.name }} status: 
      <code>{{ review.isActive ? 'ACTIVE' : 'INACTIVE' }}</code>
    </p>
    <button @click="$set(review, 'isActive', true)">Activate</button>
  </div>
</div>

Обратите внимание на использование $set в обработчике @click.

---

Из комментария ниже, если вы хотите добавить новые свойства после извлечения данных, сделайте это, прежде чем присваивать значение свойству данных, например,

this.reviews = data.from.somewhere.map(review => ({...review, isActive: false}))

Если вам необходимо добавить новое свойство после данных, вам необходимо использовать vm.$set, чтобы сделать его реактивным

this.reviews.forEach(review => {
  this.$set(review, 'isActive', false)
})

Как только эти свойства будут добавлены реактивно, вы можете вернуться к их простому изменению без $set

<button @click="review.isActive = true">