Question

这是我的第一个使用vuejs的项目，我遇到了来自全局对象的自动更新数据的问题。在我的项目中，我正在使用es6和vuejs。

我需要禁用/启用按钮，当我将全局对象中的禁用选项更改为false按钮时，不启用。

这是简单的小提琴https://fiddle.jshell.net/daer/nsk95tez/

当我点击“更改状态”时，state.disabled将更改为false，但Button未启用：（

<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实例时在它们之间复制一个值data.disabled=state.disabled（您实际上并未传递对变量的引用，只是变量本身）。您需要将状态对象设置为数据对象。

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小提琴示例。

如何从全局对象自动更新vuejs模型中的数据？

1 个答案: