使用 Vue 的版本是2.1.0,发现对于计算属性上如果是复杂对象,无法正常观察到的问题.虽然也可以用 watch 方式来解决.但是就比较麻烦了.想问一下大家有没有遇到这个问题<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script class="jquery library" src="//cdn.bootcss.com/vue/2.1.0/vue.min.js" type="text/javascript"></script> <title>RunJS 演示代码</title> </head><body> <div id="example"> <p>Original message: "{{ message.test }}"</p> <p>Computed reversed message: "{{ message.kkkk }}"</p></div> </body></html>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
1 回答
RISEBY
TA贡献1856条经验 获得超5个赞
定义的计算属性是绑定在vm实例上的新属性，相当于你的vm下有一个message.kkkk属性，跟上面定义的message是同级的，你可以在chrome的console下打印下vm，看下vm的属性是不是有两个属性，一个message下面有test和kkkk，另外一个是message.kkkk
当你定义计算属性的时候，vue会知道这个属性的依赖，computed下的message.kkkk定义的函数，相当于这个属性的getter，所以
message: { test:'asdas',
kkkk:'123123'}和
computed: { 'message.kkkk' : function () {
return this.message.test.split('').reverse().join('')
}
}两个根本就不是一个属性
添加回答
举报
0/150
提交
取消