javascript - 对对象属性的更改未反射(reflect)在 Vue 组件中

Question

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

这是该组件的简化版本:

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

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

使用 vue-devtools在 Google Chrome 中，我可以看到 item 对象中的 quantity 属性正在被更新，但模板仍然只呈现默认值(1).

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

Answer 1

问题是组件不知道它应该在 props 发生变化时重新渲染。您可以使用返回 props 值的计算属性并使用计算属性值。

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

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

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