vue.js - Vue.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-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>
JS
new Vue({
el: '#app',
mounted () {
this.user.email = 'john.doe@example.com'
},
data: () => ({
user: {
email: ''
},
cache: {
user: {
email: ''
}
},
editIcon: {
email: 'edit'
},
isProfileEditing: false,
isProfileDirty: false,
isReadOnly: true
}),
watch: {
user: function (newUser, oldUser) {
console.log('Old User Email: ', oldUser.email)
console.log('New User Email: ', newUser.email)
}
},
computed: {
},
methods: {
onUpdateProfile () {
console.log('UPDATE PROFILE: ', this.user.emaill)
},
onEditProfile () {
this.isProfileEditing = true
this.isReadOnly = false
this.cache.user.email = this.user.email
this.user.email = ''
},
cancel () {
this.isProfileEditing = false
this.isProfileDirty = false
if (!this.isReadOnly) {
this.isReadOnly = true
this.user.email = this.cache.user.email
}
},
setDirty () {
this.isProfileDirty = true
}
}
})
解决方案
要监听对象中属性的更改,您应该添加深度观察器。为此,将deep: true
属性添加到您的观察者。
watch: {
user: {
handler: function (newUser, oldUser) {
console.log('Old User Email: ', oldUser.email)
console.log('New User Email: ', newUser.email)
},
deep: true
}
}
这是更新的笔
但是,如果您尝试使用oldUser
,那么观察者将无法帮助您,因为:
注意:当改变(而不是替换)对象或数组时,旧值将与新值相同,因为它们引用相同的对象/数组。Vue 不保留 pre-mutate 值的副本。
这就是您看到两者newUser
以及oldUser
何时user.email
更新的相同值的原因。
参考 - vm.watch API
推荐阅读
- java - 如何在 Ubuntu 18.04 上安装 openjdk-9-jdk?
- swift - IBOutlet 按钮不起作用 - Swift
- powershell - 对文件名的子字符串进行排序,给出唯一值
- animation - Qt 如何为 QProgressBar 设置动画?
- c - printf()、无符号字符和 %hhd
- amazon-web-services - 如何向 AWS cognito 注册添加额外字段
- javascript - 平滑移动跨页面移动元素
- python - Python 程序无法运行 - psycopg2 重命名警告
- javascript - 在 li 列表中查找 li 的位置
- javascript - 续集中是一对一还是多对一?