javascript - 删除对象属性 (VueJs)

Question

我有这个对象:

this.object = {
  one: { ... },
  two: { ... },
  three: { ... }
}

例如，如何删除属性 two 并重新呈现 UI？我已经尝试使用 delete 但它似乎不会更改状态，并且 UI 不会重新呈现。

当我使用 this.object = { } 时，它会重新渲染 UI。最后一个问题，这是什么类型的物体？因为很难找到使用此类对象的示例或答案。

Answer 1

来自Vue Reactivity Guide (没有具体告诉你如何删除)

Vue cannot detect property addition or deletion

为了使这些突变具有反应性，您必须使用 Vue 的内置方法。你可以这样做:

this.$delete(this.object, 'three');

或者

this.$set(this.object, 'three', undefined);

为了回答您有关该对象的问题，它是 object literal .

演示:

Vue.config.productionTip = false;
Vue.config.devtools = false
new Vue({
  el: "#app",
  data() {
    return {
      object: {
        one: {},
        two: {},
        three: {}
      }
    }
  },
  methods: {
    deleteProp() {
      this.$delete(this.object, 'three');
      //this.$set(this.object, 'three', undefined);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ object }}
  <button @click="deleteProp">Delete property</button>
</div>