Question

在下面，我提供了示例代码。所以这里发生的是，我有一些要从API加载的对象。如果某些用于UI绑定的属性缺少＃app2 ，则稍后将通过UI扩展对象。在正常情况下，如果像＃app1 中那样提供了所有属性，则Vue将以递归方式绑定到数据对象的内容。但是当前，在＃app2 中，该属性丢失了，并且在UI逻辑中，我添加了缺少的属性。

现在的问题是，当我以这种方式添加属性时，app2.contentObject.toggleStatus不是带有getter和setter的vue对象。我如何手动重新初始化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>

Answer 1

首先在第二种情况下不起作用，因为在您的计算属性中，您始终为其分配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>

Answer 2

1。。在app2实例的情况下，您试图添加新属性toggleStatus并期望它是可响应的。 Vue无法检测到此更改。因此，您必须像在app1实例中一样，或者使用this.$set()方法来预先初始化属性。参见Reactivity in depth。

2。。您正在使用计算所得的属性。计算属性应该只返回一个值，而不应该修改任何内容。因此，要将属性toggleStatus添加到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

如何重新初始化vue.js的getter和setter绑定？

2 个答案: