Vue.js为什么我的观察程序不工作？_Vue.js_Vuetify.js

Vue.js为什么我的观察程序不工作？

vue.js

Vue.js为什么我的观察程序不工作？,vue.js,vuetify.js,Vue.js,Vuetify.js,在输入数据上设置了观察者之后，我尝试显示旧值和新值，但它们都未定义。。。有什么不对劲吗看 HTML <div id="app"> <v-app id="inspire"> <v-container mt-1 grid-list-xl"> <v-layout row wrap justify-space-around> <v-flex d-flex sm6 md6> <v

在输入数据上设置了观察者之后，我尝试显示旧值和新值，但它们都未定义。。。有什么不对劲吗

看

HTML

<div id="app">
  <v-app id="inspire">
    <v-container mt-1 grid-list-xl">
      <v-layout row wrap justify-space-around>
        <v-flex d-flex sm6 md6>
          <v-layout row wrap>
            <v-flex d-flex>
              <v-card class="flexcard" dark tile flat>
                <v-card-title class="card__title justify-center">PROFILE</v-card-title>
                <form @submit.prevent="onUpdateProfile()">
                <v-card-text class="card__text grow">
                  <v-text-field  @keyup.native="setDirty" placeholder="Enter your new email address" :readonly="isReadOnly" label="Email" v-model="user.email" prepend-icon="email">
                  </v-text-field>
                </v-card-text>
                <v-card-actions>
                  <v-tooltip  v-if="isReadOnly" right>
                      <v-btn  @click="onEditProfile" icon class="primary" large slot="activator">
                       <v-icon color="white">edit</v-icon>
                        </v-btn>
                        <span>EDIT</span>
                  </v-tooltip>                                                                                          
                <v-btn v-if="isProfileEditing" round @click="cancel()">CANCEL</v-btn>
                <v-btn v-if="isProfileDirty" round color="primary" type="submit">UPDATE</v-btn>
                </v-card-action>
                </form>
              </v-card>
            </v-flex>
          </v-layout>
        </v-flex>
     </v-layout>
      </v-container>
  </v-app>
</div>

如果要监视嵌套数据的更改，必须设置监视程序的

deep

选项。但是，您不能访问处理程序中的旧数据，因为Vue不保留对象的预变异值的副本。在您的情况下，

watch

对象的代码如下所示：

观察：{
用户：{
处理程序：函数（newUser）{
console.log（'新用户电子邮件：'，newUser.Email）
},
深：是的
}
}

参考：

如果要监视嵌套数据的更改，必须设置监视程序的

deep

选项。但是，您不能访问处理程序中的旧数据，因为Vue不保留对象的预变异值的副本。在您的情况下，

watch

对象的代码如下所示：

观察：{
用户：{
处理程序：函数（newUser）{
console.log（'新用户电子邮件：'，newUser.Email）
},
深：是的
}
}

参考：

若要侦听对象中属性的更改，应添加deep watcher。为此，将

deep:true

属性添加到您的观察者

watch: {
  user: {
    handler: function (newUser, oldUser) {
      console.log('Old User Email: ', oldUser.email)
      console.log('New User Email: ', newUser.email)
    },
    deep: true
  }
}

这是你的电话号码

但是，如果您试图使用

旧用户

，则观察者无法帮助您，因为：

注意：当改变（而不是替换）对象或数组时，旧值将与新值相同，因为它们引用相同的对象/数组。Vue不保留预变异值的副本

这就是当更新

user.email

时，您看到

newUser

和

oldUser

的值相同的原因

参考-