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

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

0 голосов
/ 20 июня 2020

Я провожу несколько экспериментов с интерфейсом 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?

1 Ответ

0 голосов
/ 20 июня 2020

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

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

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

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

...