Javascript 对对象属性的更改未反映在Vue组件中

我有一个带有单个道具的Vue组件，它是一个对象。当此对象中的某个属性发生更改时，它似乎不会在Vue模板中更新

以下是该组件的简化版本：

{{item.quantity}}

导出默认值{
道具：{
项目：{
要求：正确，
类型：对象
}
}
}

在Google Chrome中，我可以看到我的

项目

对象中的

数量

属性正在更新，但模板仍然只呈现默认值（

1

）

---

我需要做些什么来让Vue监视嵌套属性或其他什么吗？

问题在于，当道具发生更改时，组件不知道应该重新渲染。您可以使用返回props值的计算属性，并使用计算属性值

<template>
  <p>{{ quantity }}</p>
</template>

<script>
  export default {
    props: {
      item: {
        required: true,
        type: Object
      }
    }

    computed: {
        quantity: function() {
            return this.item.quantity
        }
    }
  }
</script>

{{数量}}

导出默认值{
道具：{
项目：{
要求：正确，
类型：对象
}
}
计算：{
数量：函数（）{
返回此.item.quantity
}
}
}

您可以从旧对象创建一个新对象，然后更改道具值，使对象参照changes@h1b9b你能在回答中解释更多吗？我不是vue.js专家，但如果组件只检查对象ref（a==b）而不是deepEqual，那么你需要一个新对象，这样它才能检测到更改。像newItem={…item，quantity:newquantity}这样的东西应该可以工作。我已经尝试使用一个计算值，用于

item

属性，特别是

item.quantity

，但是模板似乎仍然没有更新。我知道您的值来自vuex存储。您是否尝试过使用

mapState

从商店获取状态？您可以尝试在

computed

属性中使用

mapState

。该组件表示Vuex存储区中项目数组中的单个项目。该项目是订单中的行项目。如果Vuex存储中的项目数量已更新，我将尝试获取要更新的显示数量。因此，据我所知，有一个呈现项目组件数组的

父组件。如果父组件映射到Vuex存储并将映射值作为道具传递给子组件，则如果子组件在计算或数据中使用道具，则会触发子组件的重新渲染。这似乎是正确的方法。还有深度监视选项。上周我刚刚经历了同样的问题，我真正的问题是如何在vuex中更新原始阵列。