<script>
export default {
name: "DriversStandings",
data() {
return {
standingsData: [],
};
},
props: ["drivers", "isUpdated"],
watch: {
drivers: {
deep: true,
handler: function () {
this.test();
},
},
},
methods:{
test(){
console.log("chamou o teste")
this.standingsData = this.drivers
}
}
};
</script>
I'm a little crazy. Shouldn't the observer only observe the "driver" prop? When I edit "standsData" it also triggers in a way that prevents me from sorting it. Did I miss something?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This may depend on how you sort the array, but since you assigned
this.standsData = this.drivers, anyvariations onthis.standsData Changes will also mutate the data underthis.driversbecause they reference the same array. You may want to copy the driver array to put in the component state like this:methods: { test() { console.log("chamou o teste") this.standingsData = [...this.drivers]; } }Keep in mind that similar issues will arise when deeply modifying other data in
this.standsDatabecause you specifydeep: trueon the observer; if you must Do, you will need todeeplycopy the data when movingthis.driversto this.standsData. This can be done using custom code or tools like lodash.cloneDeep.Another quirk here is that, by default, Vue observers are not fired on component initialization. If you want it to be triggered when the
driversproperty changes when it is initially set during component initialization, you need to addimmediate: trueto the watcher (docs here).watch: { drivers: { deep: true, immediate: true, handler: function () { this.test(); }, }, },