vue.js - 如果 VueJS 模型属性不在原始属性列表中，则它们不会绑定

Question

在VueJs中，如果我拥有的对象data有一个具有默认值的属性，它会在我操作它时正确绑定。但是，如果我稍后设置一个全新的属性，则该新属性值将不会绑定。

我可以解释这一点的最好方法是通过以下示例：https ://jsbin.com/kahaxocohu/edit?html,js,output

如果我输入make（本田、丰田等）的值，DOM 会正确更新。但是，如果我输入 的值year，则该值不会呈现在div.

如果我改为将默认对象更改为以下，则两个属性make都year将正确绑定：car: { make: 'Honda', year: '2012' }.

标签： vue.jsdata-binding

Answer 1

为了使您的第一个示例具有响应性，数据属性需要具有 getter 和 setter。你可以在这里阅读。

简而言之，如果您的数据如下所示：

data() {
  return {
    car: {
      make: '',
    },
  },
},

并且您想将属性添加year为反应数据，您需要将其设置在某个位置（例如在挂载的钩子中）

mounted() {
  this.$set(this.car, 'year', 2012)
},

工作示例

但老实说，当您知道需要哪些属性时，然后在开始时将它们添加到您的数据中。

data() {
  return {
    car: {
      make: '',
      year: '',
    },
  },
},