时间戳

首页 > 解决方案 > Vue deep watch 无法处理对象属性更改

javascript - Vue deep watch 无法处理对象属性更改

问题描述

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

标签： javascriptvue.jsobjectvuejs2vue-component

解决方案

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

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

  • 一种handler方法（必须命名为“处理程序”，如watch文档中所示）
  • deep财产_
watch: {
  customer: {
    handler (newData) {
      console.log("test", newData)
    },
    deep: true
  }
}

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

推荐阅读