Vue Js aktualisiert nicht von JSON

Question

Ich nehme dieses JSON-Objekt und übergebe es an diesen Vue. Es wird jedoch nicht auf meiner Seite aktualisiert, aber das Objekt ist da seit window.alert (jobj.Name) funktioniert gut. Hier ist mein Blick und meine Sicht.

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> 

Es wird nur "NICHT GEÄNDERT" anstelle des Objektnamens angezeigt.

Answer 1

Sie haben die Methode nicht aufgerufen. Sie sollten eine Schaltfläche verwenden, um die Methode auszulösen.

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; 

    } 
} });