আমার নামে একটি অ্যারে 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.)এবং আমি তৈরি কোডপেনে , ফলাফলটি একটি খালি অ্যারে এবং পরিবর্তিত অবজেক্ট নয় যা পরিবর্তিত হয়েছিল যা আমি প্রত্যাশা করেছিলাম।
কেউ যদি পরামর্শ দিতে পারে যে কেন এটি হচ্ছে বা আমি এখানে ভুল হয়ে গেলাম তবে এটির প্রশংসা হবে, অনেক ধন্যবাদ!