Иногда нам нужно глубоко наблюдать за массивом объектов и вычислять изменения с помощью Vue.js.
В этой статье мы рассмотрим, как глубоко наблюдать за массивом объектов и вычислять изменения с помощью Vue.js.
Глубокий просмотр массива объектов и расчет изменений с помощью Vue.js
Мы можем глубоко наблюдать за массивом объектов и вычислять изменения с помощью Vue.js с наблюдателями.
Например, мы можем написать:
App.vue
<template>
<div id="app">
<Person :person="person" v-for="person in people" :key="person.id"></Person>
</div>
</template>
<script>
import Person from "@/components/Person";
export default {
name: "App",
components: {
Person,
},
data() {
return {
people: [
{ id: 0, name: "Bob", age: 27 },
{ id: 1, name: "Frank", age: 32 },
{ id: 2, name: "Joe", age: 38 },
],
};
},
};
</script>
Person.vue
<template>
<div class="hello">
<div class="person">
{{ p.name }}
<input type="text" v-model="p.age" />
</div>
</div>
</template>
<script>
export default {
name: "Person",
props: {
person: Object,
},
data() {
return {
p: {},
};
},
watch: {
p: {
handler(newValue) {
console.log(newValue.id);
console.log(newValue.age);
},
deep: true,
},
},
mounted() {
this.p = { ...this.person };
},
};
</script>
В App.vue у нас есть массив people, который используется для рендеринга компонента Person с помощью v-for.
Мы передаем person как значение реквизита person.
Затем в Person мы добавляем свойство props, чтобы принять свойство person.
И у нас есть реактивное свойство p, которое мы установили на копию person в качестве значения в хуке mounted.
В наблюдателе p в свойстве watch мы регистрируем значение newValue.
Мы устанавливаем для параметра deep значение true, чтобы позволить нам отслеживать изменения в объектах.
А в шаблоне мы рендерим p.name и привязываем p.age к входному значению ввода текста.
Теперь, когда мы вводим текст, должен запускаться наблюдатель p и регистрировать значение newValue.age.
Заключение
Мы можем глубоко наблюдать за массивом объектов и вычислять изменения с помощью Vue.js с наблюдателями.
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
