如何從全局對象自動更新vuejs模型中的數據？

Question

這是我的第一個使用vuejs的項目，而且我有來自全局對象的自動更新數據的問題。 在我的項目中，我使用es6和vuejs。

我需要禁用/啓用按鈕，當我更改禁用全局對象選項爲false按鈕不啓用。

下面是簡單的小提琴https://fiddle.jshell.net/daer/nsk95tez/

當我點擊「更改狀態」 state.disabled正在改變爲false，但按鈕豈不等於讓:(

<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所以按鈕狀態不會改變，你正在創建一個數據對象和一個狀態對象，並在它們之間複製一個值爲data.disabled=state.disabled的Vue實例（你實際上並沒有將變量的引用傳遞給變量本身） 。您需要將狀態對象設置爲數據對象克拉。

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

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

然而，你真的不需要一個ES6類來存儲狀態。關於Vue.js的關鍵部分之一是數據變量是一個簡單的對象。 Es6類是用於創建具有繼承性的對象的語法糖，在這種情況下您不需要它。

試試這個

var state = {disable:true}; 

https://fiddle.jshell.net/nsk95tez/1/下面是修改的JS小提琴例子。