Vue ключи не удаляются из объекта

Question

Я пытаюсь удалить ключ из объекта в родительском компоненте. Дочерний компонент отправляет событие (со значением элемента) обратно в родительский метод, который инициирует удаление в родительском объекте данных.

Родительский компонент:

data() {
  return {
    savedNews: Object
  }
},
methods: {
  containsKey(obj, key) {
    var result = Object.keys(obj).includes(key)
    return result
  },
  handleSaveNews(item) {
    if (!this.containsKey(this.savedNews, item.url)) {
      this.savedNews = {
        [item.url]: item,
        ...this.savedNews
      }
    } else {
      console.log(this.containsKey(this.savedNews, item.url))
      var res = delete(this.savedNews, item.url)
      console.log(res)
      console.log(this.containsKey(this.savedNews, item.url))
    }
  }
}

Все console.log s в последнем операторе else возвращают true. Это говорит о том, что удаление прошло успешно, но ключ все еще там. Как мне удалить этот ключ?

Answer 1

С документы :

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

Использование this.$delete:

this.$delete(this.savedNews, item.url)

или this.$set (который также должен использоваться для изменения свойств):

this.$set(this.savedNews, item.url, undefined);

---

Дополнительная информация: $ - это соглашение об именах Vue использует для своих встроенных методов, которые доступны на каждом экземпляре компонента. Есть несколько плагинов, которые тоже выбирают этот шаблон. Вы также можете использовать встроенные модули внутри других модулей, если вы, например, import Vue и используете Vue.delete. Вы можете добавить свои собственные методы, такие как Vue.prototype.$mymethod = ....