Vue Keys 不会从 Object 中删除

Posted 2023-02-23

【中文标题】Vue Keys 不会从 Object 中删除

【英文标题】：Vue Keys do not delete from Object

【发布时间】：2020-07-21 16:22:32

【问题描述】：

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

父组件：

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))
    
  

最后一个 else 语句中的所有 console.logs 都返回 true。就是说删除成功了，但是key还在。如何删除此密钥？

【问题讨论】：

那个delete函数是从哪里来的？

您的数据不应将 savedNews 初始化为 Object 构造函数。相反，请尝试 savedNews: 或 savedNews: Object.create(null)

我通过其他帖子找到了delete。据说这是一种 ES6 方法。不过，对我不起作用。 [***.com/questions/44954459/…

【参考方案1】：

来自the docs：

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

【讨论】：

谢谢！我对 Vue 还很陌生。 this.$<function_name>后面有什么用？ $ 是什么意思？

不客气！ $ 是 Vue 为其内置方法使用的命名约定，可在每个组件实例上使用。您可以添加自己的 Vue.prototype.$mymethod。也有一些插件选择遵循这种模式。例如，如果您 import Vue 并使用 Vue.delete，您也可以在其他模块中使用内置函数。我会将此信息复制到答案中。