Vue Js 没有从 JSON 更新答案

【问题标题】：Vue Js not updating from JSONVue Js 没有从 JSON 更新
【发布时间】：2017-07-04 10:42:34
【问题描述】：

我正在抓取这个 JSON 对象并将它传递给这个 Vue。但是，它没有在我的页面上更新，但是该对象在那里，因为 window.alert(jobj.Name) 工作正常。这是我的vue和我的观点。

var app2 = new Vue({
el: '#menuPage',

data: {
    HeaderTitle: 'NOT CHANGED',
    content_body: 'test body',
},
methods: {
    loadMENU: function (jobj) {

        app2 = this;
        window.location.href = "tools/menu.html"; //relative to domain

        window.alert(jobj.Name);
        this.HeaderTitle = jobj.Name;

    }
} }); 




  <div id="menuPage">{{HeaderTitle}}</div>

它只显示“未更改”而不是对象名称。

【问题讨论】：

试图理解您的代码示例...更改 location.href 然后设置 this.HeaderTitle 对我来说似乎很奇怪。此代码是否在 menu.html 页面上运行，如果是，您是否可能正在重新加载页面（通过设置 location.href）并因此将 Vue 对象重置为其初始状态？如果您注释掉 window.location.href 行，它会起作用吗？
我改变href的原因是因为我在另一个页面上，“login.html。所以在代码的另一部分我1.验证登录，当它返回true时（它确实）我打电话app2.loadMENU(data); ，其中 data 是一个 JSON 对象。然后我加载 Menu.html 页面并更新其中的所有信息。我能够加载该页面，但如上所述它不会更新信息。它只显示预设的“未更改”
好吧，我想我有点明白了。当您设置 location.href 时，您正在让浏览器导航到一个新页面，这会清除当前页面中的任何状态。如果同样的脚本在新页面上运行，它将创建一个全新的 Vue 实例（并且 HeaderTitle 的初始值将是 'NOT CHANGED'）。
我相信你是对的。您是否推荐任何其他方式来实现我正在做的事情？
@GuiCosta 你需要使用 vue-router 来浏览你的 SPA。

标签： javascript html json vue.js

【解决方案1】：

您没有调用该方法。您应该使用一个按钮来触发该方法。

html

<div id="menuPage">{{HeaderTitle}}
  <button v-on:click="loadMENU">button</button>
</div>

javascript

var app2 = new Vue({
el: '#menuPage',

data: {
    HeaderTitle: 'NOT CHANGED',
    content_body: 'test body',
},
methods: {
    loadMENU: function () {

        app2 = this;
        const herf = window.location.href; 
        window.alert(herf);
        this.HeaderTitle = herf;

    }
} });

【讨论】：