Vue deep watch 无法处理对象属性更改答案

【问题标题】：Vue deep watch not working on object property changesVue deep watch 无法处理对象属性更改
【发布时间】：2021-05-28 04:16:59
【问题描述】：

我有一个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
},

【问题讨论】：

标签： javascript vue.js object vuejs2 vue-component

【解决方案1】：

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

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

handler 方法（必须命名为“handler”，如watch docs）
deep 属性

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

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

【讨论】：