Следите за изменениями данных компонентов, которые не работают должным образом

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"). Но наблюдатель работает не так, как ожидалось.

Чтобы он заработал, мне нужно определить функцию whatcher для каждого поля item, ie item.quantity, item.variants.

Есть ли способ привязать часы ко всему объекту item?

Answer 1

VueJS не отслеживает вложенные свойства из-за проблем с производительностью. Но да, это действительно дает нам возможность глубоко наблюдать за объектами и массивом.

Попробуйте заменить объект часов на:

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

Вы можете узнать больше о свойствах часов здесь .