试图改变对象属性并保持反应性。属性或方法“vm”未在实例上定义,但在呈现期间引用

假设你 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}))

之后 数据已分配,您需要使用 使其反应

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

一旦这些属性以反应方式添加,您就可以返回到简单地更改它们而不必更改它们 $套

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