注意组件数据更改未按预期工作

Question

我正在用 Vue.js 在前端做一些实验，我定义了一个这样的组件：

<template id="order-item">
    <select v-model="item.product">
        ...
    </select>

    <input type="number" v-model="item.quantity">

    <textarea v-model="item.variants"></textarea>
</template>

<script>
    Vue.component('order-item', {
        props: ['idx', 'product', 'qty', 'variants'],
        template: '#order-item',
        data: function () {
            return {
                item: {
                    product: this.product,
                    quantity: this.qty,
                    variants: this.variants
                }
            }
        },
        watch: {
            item: function () {
                console.log("change")
            }
        }
    })
</script>

每次 item 的字段发生变化时，我需要...做一些事情（在我正在记录 "change" 的示例中）。但是观察者并没有像预期的那样工作。

为了让它工作，我需要为每个 item 的字段定义一个 whatcher 函数，即 item.quantity、item.variants.

有没有办法将手表绑定到整个 item 对象？

Answer 1

由于性能问题，VueJS 不监视嵌套属性。但是，是的，它确实为我们提供了一种深入观察对象和数组的方法。

尝试将您的 watch 对象替换为：

watch: {
   item: {
       deep: true,
       handler() {
           console.log("change") 
       }
   }
}

您可以了解有关手表属性的更多信息here。

注意组件数据更改未按预期工作

Watch for component data changes not working as expected

watch

vue-component

vuejs2