I'm new to working with Vuejs and I'm encountering an issue with updating data from a global object automatically. My project involves the use of ES6 and Vuejs.
The problem I'm facing is related to enabling/disabling a button based on a global object's property. When I change the 'disabled' option in the global object to false, the button doesn't become enabled as expected.
You can view a simple example in this fiddle: https://fiddle.jshell.net/daer/nsk95tez/
Even though the 'disabled' state is changed to false when clicking "Change state", the Button remains disabled.
<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);
}
}
});