Question

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

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

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

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

在Google Chrome浏览器中使用vue-devtools，我可以看到quantity对象中的item属性正在更新，但模板仍然只显示默认值价值（1）。

我是否需要做些什么才能使Vue观看嵌套属性？

Answer 1

问题是，当道具发生变化时，组件不会意识到它应该重新渲染。您可以使用一个计算属性，该属性返回props值并使用计算的属性值。

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

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

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

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

1 个答案: