使用 Vue 的版本是2.1.0,发现对于计算属性上如果是复杂对象,无法正常观察到的问题.虽然也可以用 watch 方式来解决.但是就比较麻烦了.想问一下大家有没有遇到这个问题
RunJS 演示代码
Original message: "{{ message.test }}"
Computed reversed message: "{{ message.kkkk }}"
var vm = new Vue({
el: '#example',
data: {
message: {
test:'asdas',
kkkk:'123123'
}
},
computed: {
'message.kkkk' : function () {
return this.message.test.split('').reverse().join('')
}
}
})
示例 Demo:http://runjs.cn/code/vpcdas8z
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
定义的计算属性是绑定在vm实例上的新属性,相当于你的vm下有一个message.kkkk属性,跟上面定义的message是同级的,你可以在chrome的console下打印下vm,看下vm的属性是不是有两个属性,一个message下面有test和kkkk,另外一个是message.kkkk
当你定义计算属性的时候,vue会知道这个属性的依赖,computed下的message.kkkk定义的函数,相当于这个属性的getter,所以
和
两个根本就不是一个属性
名字起错了啊,你的
message.kkkk是'123123',你的vm上都有这个了,添加计算属性是无效的啊!!!