グローバルオブジェクトからvuejsモデルのデータを自動更新する方法は？

Question

これはvuejsの私の最初のプロジェクトで、グローバルオブジェクトからの自動更新データに問題があります。 私のプロジェクトでは、私はes6とvuejsを使用しています。

無効にする/有効にするボタンが必要です。また、グローバルオブジェクトの無効なオプションをfalseに変更すると有効になりません。ここで

簡単なフィドルhttps://fiddle.jshell.net/daer/nsk95tez/

私はstate.disabled falseに変更されますが、ボタンが有効is't「状態が変更」:(

<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

をクリックすると、問題があなた、あなたが実際に変化していないです変数data.disabledはボタンの状態が変化していないので、データオブジェクトと状態オブジェクトを作成し、Vueインスタンスの作成時にそれらの間に1つの値data.disabled=state.disabledをコピーしています（実際には変数自体に変数への参照を渡さない）あなたはデータオブジェクトとして状態オブジェクトを設定する必要がありますct。

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

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

あなたは本当に状態を保存するためにES6クラスを必要としませんが。 Vue.jsの重要な部分の1つは、データ変数が単純なオブジェクトであることです。 Es6クラスは、このシナリオでは不要な継承を持つオブジェクトを作成するための構文的な砂糖です。

は、ここでは、この

var state = {disable:true}; 

https://fiddle.jshell.net/nsk95tez/1/を試してみてくださいjsの変更フィドル例です。