Vue为数据根级添加属性,并使之成为反应式的。

问题描述 投票:0回答:2

考虑下面的代码。

let myData = {
    a: 1
}

const app = new Vue({
    data: myData
});

正如Vue docs所说,当我们尝试添加一个像下面这样的属性时,新的属性不是反应式的。

myData.b = 12;
console.log(app.b); // undefined

Vue文档建议使用 Vue.set:

Vue.set(myData, 'b', 12);
console.log(app.b); // still undefined

Vue docs说 Vue.set 为一个反应式对象添加一个属性!

但我想添加 b 到数据的根级。我不知道如何使 b 反应式。

javascript vue.js
2个回答
3
投票

文档中明确说你 不能加 顶端 级键.

Vue不允许向已经创建的实例动态添加新的根级反应式属性。

必须 在根级对象中添加一个键,以便以后可以更新它。

你可以

  • 创建一个具有默认值的键,你将更新它。这意味着你事先就知道这个键
  • 用一个通用键创建一个空对象(例如 dynamicProps)并使用 Vue.set 以在运行时向其添加动态键。

1
投票

问题很简单,如何创建一个根级属性并使之成为反应式的?如何创建一个根级属性并使之成为反应式的?

data 只有当实例被创建时,它们才会被反应。这意味着如果你添加了一个新的属性,比如。

myData.b = 12;

那么就会改变为 b 将不会触发任何视图更新。如果你知道以后会需要一个属性,但它一开始是空的或不存在的,你需要设置一些初始值。比如说,你可以设置一些初始值。

let myData = { a: 1, b: 0 }
// or,
let myData = { a: 1, b: null }

现在你可以看到 b 也显示在UI中。

let myData = { a: 1, b: 0 }
const app = new Vue({
  el: "#myApp",
  data: myData
})

myData.b = 12;
console.log(app.$data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
  <pre>{{ b }} </pre>
</div>

0
投票

我在文档中找不到你是否可以在根级添加属性 并让它也成为反应式的,但有一个替代的解决方案。

let myData = {
    obj: {
     a: 1
    }
}

const app = new Vue({
    data: myData,
    watch: {
      obj: {
        handler(val) {
          console.log('watching !', val)
        },
        deep: true
      }
    }
});

Vue.set(app.obj, 'b', 12)

console.log(app.$data)
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
热门问题
推荐问题
最新问题