Wie automatisch Daten in Vuejs Modell von globalen Objekt aktualisieren?

Question

Dies ist mein erstes Projekt mit vuejs und ich habe Probleme mit automatischen Update-Daten von einem globalen Objekt. In meinem Projekt verwende ich es6 und vuejs.

Ich muss deaktiviert/aktiviert Schaltfläche und wenn ich deaktiviert Option in globalen Objekt zu false Schaltfläche ist nicht aktivieren.

Hier einfache Geige ist https://fiddle.jshell.net/daer/nsk95tez/

Wenn ich auf false „Zustand ändern“ klicken state.disabled ändert aber Knopf is't ermöglichen :(

<div id="some"> 
    <p>Current state: {{disabled}}</p> 
    <button type="button" v-bind:disabled="disabled">Button</button> 
</div> 
<br> 
<button id="state" type="button" v-on:click="changeState">Change state</button> 

class stateList { 
    constructor() { 
     this.disabled = true; 
    } 
}; 
// export default (new stateList); 


// import state from '../state/'; 
var state = new stateList; 

var some = new Vue({ 
    el: '#some', 
    data: { 
    disabled: state.disabled 
    }, 
    methods: { 
    methodOne: function(e) { 
     // ... 
    } 
    } 
}); 

var changeState = new Vue({ 
    el: '#state', 
    methods: { 
    changeState: function(e) { 
     state.disabled = false; 
     alert(state.disabled); 
    } 
    } 
}); 

Answer 1

Das Problem ist, dass Sie Ihre nicht wirklich zu ändern Die Variable data.disabled ändert also nicht den Zustand der Schaltfläche Sie erstellen ein Datenobjekt und ein Zustandsobjekt und kopieren einen Wert data.disabled=state.disabled zwischen ihnen bei der Erstellung der Vue-Instanz (Sie übergeben keinen Verweis auf die Variable nur die Variable selbst) Sie müssen das Zustandsobjekt als Datenobjekt festlegen ct.

el: '#some', 
data: state, 
methods: { 

https://fiddle.jshell.net/nsk95tez/2/

auch immer Sie eine es6 Klasse nicht wirklich brauchen Zustand zu speichern. Eines der Schlüsselelemente von Vue.js ist, dass die Datenvariable ein einfaches Objekt ist. Es6-Klasse ist syntaktischer Zucker zum Erstellen von Objekten mit Vererbung, die Sie in diesem Szenario nicht benötigen.

dieses

var state = {disable:true}; 

https://fiddle.jshell.net/nsk95tez/1/ ist hier versuchen die modifizierte js Geige Beispiel.