vue js 2路数据绑定不更新

Question

所以我有一个快速的Vue JS问题看起来很奇怪，我有以下

var home = new Vue({
 el: '#home',
 data:{
    title: 'welcome to the app'
 }
});

哪个工作正常，我的HTML中的标题更新得很好......

现在当我这样做时

home.$data.title = 'this is the new title'

html

  <div class="app-topbar">{{title | uppercase}}</div>

不更新，我是否必须强制更新数据绑定或什么？

谢谢Sam

Answer 1

这对我来说很好。只需设置home.title，就像这样： http://jsfiddle.net/6x2v9y20/1/

也许您在创建Vue项目之前尝试访问home.title？

Answer 2

对于仍在搜索此问题的人来说，问题可能是由警告引起的。

更新数据并强制实例中的事件的最佳方法是使用Vue.set。

点击链接：https://vuejs.org/v2/guide/list.html#Caveats

Answer 3

最后，我还使用了Vue.forceUpdate()`。

但事实上，您应该只使用home.title。

这个问题的清单：

• 计算属性？
• this.$set
• 小心箭头功能和lodash
• 包含组件：.sync

Answer 4

您不需要home.$data.title，如果您在Vue实例中，只需使用this.title更改标题值即可。

这是一个快速的小提琴。

http://jsfiddle.net/stefkosmo/6x2v9y20/

Answer 5

如果要更新实例的数据，记录的方法是按this.$set('title', 'this is the new title);设置新数据 当你这样做时，实际上是什么框架，重新渲染你的模板和html更新

http://vuejs.org/api/instance-methods.html#vm- \ $集（_keypath \，值）