代码之家 › 专栏 › 技术社区 › Onyx

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

vuejs2 vue.js javascript

Onyx · 技术社区 · 6 年前

@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实例是如何工作的,我正在尝试在不应该访问的时候访问它。

在这两种情况下,我得到的错误“属性或方法”vm“/”Vue“不是在实例上定义的,而是在呈现期间引用的。”

我使用的是Vue webpack simple webpack模板,我的Vue实例似乎已在中初始化主要.js文件如下:

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

1 回复 | 直到 6 年前

Phil 6 年前

假设你 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">

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前