时间戳

首页 > 解决方案 > Vue Keys 不会从 Object 中删除

vue.js - Vue Keys 不会从 Object 中删除

问题描述

我正在尝试从父组件中的对象中删除一个键。子组件向父方法发送一个事件（带有项目值），触发父数据对象中的删除。

父组件：

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最后一个 else 语句中的所有s 都返回 true。就是说删除成功了，但是key还在。如何删除此密钥？

标签： vue.jsobjectmethodsvuejs2vue-component

解决方案

从文档：

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 = ....

推荐阅读