Удалить свойство объекта (VueJs)

Question

У меня есть этот объект:

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

Как я могу удалить, например, свойство three и сделать визуализацию интерфейса пользователя? Я уже пытался использовать delete, но похоже, что он не меняет состояние и пользовательский интерфейс не перерисовывается.

Когда я использую this.object = { }, он перерисовывает пользовательский интерфейс. Последний вопрос, что это за объект? Потому что трудно найти пример или ответ, который использует этот тип объекта.

Answer 1

Из Vue Руководства по реактивности (в котором конкретно не говорится, как удалять)

Vue не может обнаружить добавление или удаление свойства

Чтобы эти мутации были реактивными, вы должны использовать встроенные методы Vue. Вы можете сделать:

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

ИЛИ

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

Чтобы ответить на ваш вопрос об объекте, это литерал объекта .

Демонстрация:

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>

Answer 2

Попробуйте это в компоненте

<template>
    <ul>
        <li v-for="(obj,key) in object" @click="deleteKey(key)">{{obj}}</li>
    </ul>
</template>

export default {
    name: "YourComponent",
    data: () => {
        return {
            object: {
                one: {},
                two: {},
                three: {}
            }
        }
    },
    methods: {
        deleteKey: function (key) {
            this.$delete(this.object, key);
        }
    },
    components: {Loader}
}

При щелчке по перечисленным значениям он будет удален и увидит изменение пользовательского интерфейса.

Answer 3

Просто сделай:

this.object.three = { } // just make it empty, or
delete this.object.three // or
delete this.object['three']