Vue Deep Watch 不适用于对象属性更改

Question

我有一个customer对象作为我的初始数据。我有一些文本字段，当有人开始输入时，它会向对象添加不同的键。添加新值时key，观察器会正确触发，但如果从现有值编辑该键，则不会。

因此，如果我输入街道地址，则会key street_address1将其添加到customer对象中，以便观察者触发。如果我开始编辑街道地址，它就不会再触发。

模板

<v-container>
  <v-col cols="12">
    <h2>Contact</h2>
    <div>Email Adderss</div>
    <v-text-field
      outlined
      v-model="customer.email"
      >
    </v-text-field>
  </v-col>

  <v-col cols="12">
    <v-row>
      <v-col cols="6">
        <div>First</div>
        <v-text-field
          outlined
          v-model="customer.first"
          >
        </v-text-field>
      </v-col>
      <v-col cols="6">
        <div>Lasts</div>
        <v-text-field
          outlined
          v-model="customer.last"
          >
        </v-text-field>
      </v-col>
    </v-row>
  </v-col>

  <v-col cols="12">
    <div>Shipping Address Line 1</div>
    <v-text-field
      outlined
      v-model="customer.street_1"
      >
    </v-text-field>
  </v-col>

  <v-col cols="12">
    <div>Shipping Address Line 2</div>
    <v-text-field
      outlined
      v-model="customer.street_2"
      >
    </v-text-field>
  </v-col>
</v-container>

脚本

data() {
  return {
    customer: {}
  };
},
watch: {
  customer(newData) {
    console.log("test", newData)
  },
  deep: true
},

Answer 1

这是一个语法问题。该deep属性未注册，因为它错误地位于手表外部，就好像它是第二块手表一样。

对customer手表使用对象语法。该对象应该具有两个属性：

• 一个handler方法（必须命名为“handler”，如watch文档中所示）
• 该deep财产

watch: {
  customer: {
    handler (newData) {
      console.log("test", newData)
    },
    deep: true
  }
}

^{immediate: true如果您希望watch在首次创建组件时运行它，它也可以有一个属性。}