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

How to auto update data in vuejs model from global object?

本文关键字：模型 vuejs 数据 更新 全局 对象      更新时间：2023-09-26

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

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

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

当我点击"更改状态"时，状态.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);
    }
  }
});

问题是您实际上没有更改变量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-fiddle示例。

相关文章：