复杂对象的计算属性无法绑定

新手上路,请多包涵

使用 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

阅读 4.9k
2 个回答

定义的计算属性是绑定在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('')
    }
  }

两个根本就不是一个属性

名字起错了啊,你的message.kkkk'123123',你的vm上都有这个了,添加计算属性是无效的啊!!!

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题