У меня есть массив с именем people
, который содержит объекты следующим образом:
До
[
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 32},
{id: 2, name: 'Joe', age: 38}
]
Он может измениться:
После
[
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 33},
{id: 2, name: 'Joe', age: 38}
]
Обратите внимание, что Фрэнку исполнилось 33 года.
У меня есть приложение, в котором я пытаюсь посмотреть массив людей, и когда какое-либо из значений изменяется, запишите это изменение:
<style>
input {
display: block;
}
</style>
<div id="app">
<input type="text" v-for="(person, index) in people" v-model="people[index].age" />
</div>
<script>
new Vue({
el: '#app',
data: {
people: [
{id: 0, name: 'Bob', age: 27},
{id: 1, name: 'Frank', age: 32},
{id: 2, name: 'Joe', age: 38}
]
},
watch: {
people: {
handler: function (val, oldVal) {
// Return the object that changed
var changed = val.filter( function( p, idx ) {
return Object.keys(p).some( function( prop ) {
return p[prop] !== oldVal[idx][prop];
})
})
// Log it
console.log(changed)
},
deep: true
}
}
})
</script>
Я основывался на этом вопросе который вчера я спросил о сравнении массивов, и выбрал самый быстрый рабочий ответ.
Итак, в этот момент я ожидаю увидеть результат: { id: 1, name: 'Frank', age: 33 }
Но все, что я верну в консоль (имея в виду, я имел это в компоненте):
[Vue warn]: Error in watcher "people"
(found in anonymous component - use the "name" option for better debugging messages.)
И в codepen, который я создал, результатом является пустой массив, а не измененный объект, который изменился, что было бы тем, что я ожидал.
Если кто-нибудь может предположить, почему это происходит, или где я здесь не так, то было бы очень признательно, большое спасибо!