Question

在某些组件中，我有这个：

export default {
    data() {
        return {
            a: 'a',
            b: {}
        };
    }
}

现在，如果我在某个地方执行了this.a = 'aa';，并且在计算函数中使用了this.a，那么一切都会愉快地进行更新。但是，如果我做this.b.key = 'bb'; ...，那么什么也没发生。也就是说，this.b不会进行被动更新，这让我们很难过。

经过一些测试，看来我可以触发对this.b的反应式更新，但是只能通过分配this.b = completelyNewObject; ...来进行，这很尴尬。

此外，在这种情况下，this.b是不可迭代的，这使得在计算函数中使用它非常困难。

那么...我在这里做错什么了？

Answer 1

这是Vue 2.x的局限性，可能的解决方案是使用Vue.set或this。$ set或Object.assign方法

this.$set(this.b, 'key', 'value to assign')

OR

Vue.set(this.b, 'key', 'value to assign')

OR

this.b= Object.assign({}, this.b, { key: 'value to assign' })

注意：此问题已在Vue 3中解决，但大多数人仍在使用Vue 2x：）

Answer 2

这是因为b.key在数据对象的初始状态中不存在，因此Vue无法绑定到它。一种简单的解决方案是在您的初始对象中添加一个key属性。您还可以使用Vue.set来分配值。

new Vue({
  el: "#app",
  data(){
  	return {
      a: {},
      b: {
      	key: ''
      },
      c: {}
    }
  },
  methods: {
  	changeA(){
    	this.a.key = Math.random();
    },
    changeB(){
    	this.b.key = Math.random();
    },
    changeC(){
    	Vue.set(this.c, 'key', Math.random());
    }
  }
});

body {
  font-family: sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p><button @click="changeA">Change me!</button> <strong>a.key:</strong> {{ a.key }}</p>
  <p><button @click="changeB">Change me!</button> <strong>b.key:</strong> {{ b.key }}</p>
  <p><button @click="changeC">Change me!</button> <strong>c.key:</strong> {{ c.key }}</p>
</div>

请注意b和c两者如何反应并立即更新，而a则不是（由于Vue重新渲染应用程序/组件，如果您更改b或c，它确实会更新）。

Vue：如何在组件数据中使用对象？

2 个答案: