vue js 2方式数据绑定不更新答案

【问题标题】：vue js 2 way data binding not updatingvue js 2方式数据绑定不更新
【发布时间】：2015-10-01 00:23:06
【问题描述】：

所以我有一个看起来很奇怪的快速 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>

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

谢谢山姆

【问题讨论】：

标签： vue.js

【解决方案1】：

你不需要home.$data.title，如果你在你的Vue实例中，你可以简单地使用this.title改变标题值。

这是一个快速的小提琴。

【讨论】：

【解决方案2】：

这对我来说很好。只需设置home.title，如下所示： http://jsfiddle.net/6x2v9y20/1/

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

但实际上这里看起来你应该简单地使用home.title。

我的此类问题清单：

【讨论】：