代码之家 › 专栏 › 技术社区 › Hans Yulian

如何重新初始化Vue.js的getter和setter绑定?

vue.js

Hans Yulian · 技术社区 · 7 年前

下面我提供了一个示例代码。所以这里发生的是,我有一些将从API加载的对象。如果用户界面中缺少用于绑定的某些属性,则稍后将由用户界面扩展该对象。 γAPP2 . 在正常情况下,如果所有属性都 αAPP1 Vue将递归地绑定到数据对象的内容。但目前,在 γAPP2 ,缺少属性,在UI逻辑中,我添加了缺少的属性。

现在的问题是,当我以这种方式添加属性时, app2.contentObject.toggleStatus 不是Vue的getter和setter对象。如何手动重新初始化getter和setter的状态,以便将更改反映到UI中?

var app1 = new Vue({
  el: "#app1",
  data: {
    contentObject: {
      toggleStatus: false
    }
  },
  computed: {
    content: function(){
      var contentObject = this.contentObject;
      return contentObject;
    }
  },
  methods: {
    toggle : function(){
      this.contentObject.toggleStatus  = !this.contentObject.toggleStatus;
    }
  }
})
var app2 = new Vue({
  el: "#app2",
  data: {
    contentObject: {
    
    }
  },
  computed: {
    content: function(){
      var contentObject = this.contentObject;
      contentObject.toggleStatus = false;
      return contentObject;
    }
  },
  methods: {
    toggle : function(){
      this.contentObject.toggleStatus  = !this.contentObject.toggleStatus;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app1">
  current toggle status: {{content.toggleStatus}}<br/>
  <button @click="toggle">Toggle (working)</button>
</div>
<div id="app2">
  current toggle status: {{content.toggleStatus}}<br/>
  <button @click="toggle">Toggle (not working)</button>
</div>

2 回复 | 直到 7 年前

Vamsi Krishna 7 年前

1。在 app2 Vue实例的案例您正在尝试添加新属性 toggleStatus 希望它是反应性的。Vue无法检测到此更改。所以您必须像在中那样预先初始化属性 app1 实例或使用 this.$set() 方法。见 Reactivity in depth .

2。您使用的是计算属性。计算属性只应返回一个值,不应修改任何内容。所以要添加属性 切换状态 到 contentObject 利用创建的生命周期挂钩。

因此,以下是变化:

var app2 = new Vue({
  el: "#app2",
  data: {
    contentObject: {}
  },
  created() {
    this.$set(this.contentObject, "toggleStatus", false);
  },
  methods: {
    toggle: function() {
      this.contentObject.toggleStatus = !this.contentObject.toggleStatus;
    }
  }
});

这是 working fiddle

Aldarund 7 年前

它首先在第二种情况下不起作用,因为在计算属性中,总是将false赋给它。

contentObject.toggleStatus = false;

第二,你在寻找 Vue.set/Object.assign

var app1 = new Vue({
  el: "#app1",
  data: {
    contentObject: {
      toggleStatus: false
    }
  },
  computed: {
    content: function(){
      var contentObject = this.contentObject;
      return contentObject;
    }
  },
  methods: {
    toggle : function(){
      this.contentObject.toggleStatus  = !this.contentObject.toggleStatus;
    }
  }
})
var app2 = new Vue({
  el: "#app2",
  data: {
    contentObject: {
    
    }
  },
  computed: {
    content: function(){
      var contentObject = this.contentObject;
      return contentObject;
    }
  },
  methods: {
    toggle : function(){
      this.$set(this.contentObject, 'toggleStatus', !(this.contentObject.toggleStatus || false));
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app1">
  current toggle status: {{content.toggleStatus}}<br/>
  <button @click="toggle">Toggle (working)</button>
</div>
<div id="app2">
  current toggle status: {{content.toggleStatus}}<br/>
  <button @click="toggle">Toggle (not working)</button>
</div>