obj.hasOwnProperty 即使在创建属性后也总是返回 false [重复]

Posted 2023-02-22

【中文标题】obj.hasOwnProperty 即使在创建属性后也总是返回 false [重复]

【英文标题】：obj.hasOwnProperty always returns false even after property created [duplicate]

【发布时间】：2021-07-21 16:56:09

【问题描述】：

在我的 Vue 应用程序中，我有一组股票：

stocks : [
    'name' : 'Tesla', 'price' : 800,
    'name' : 'Microsoft', 'price' : 300,
]

我还有一个看起来像这样的条件元素：

<template v-for="stock in stocks">
    <div> stock.name </div>
    <div v-if="stock.hasOwnProperty('test')">test</div>
</template>

我有一个方法可以设置股票的测试属性。例如：

this.stocks[0].test = true;

如果在此语句下，我 console.log(this.stocks) 我看到第一个 stock 的 test 属性。但是，在模板中，当 stock 具有此属性时应该显示的元素仍然没有显示。为什么会这样？如何根据库存元素是否具有test 属性来动态显示/隐藏库存元素？

【问题讨论】：

Vue 没有检测到变化；您必须 a) 使用 this.$forceUpdate(); 或 b) 对更改的列表项使用键

【参考方案1】：

Vue（无论如何都是 2）cannot detect property addition or removal。

您应该在stocks 中声明test 属性，以便它从一开始就存在：

stocks : [
    'name' : 'Tesla', 'price' : 800, test: false ,
    'name' : 'Microsoft', 'price' : 300, test: false ,
]

然后它将是反应式的，您可以根据 test 的值显示/隐藏您的元素。