<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>
我有点疯狂了。观察者不应该只观察“司机”道具吗？当我编辑“standsData”时，它也会以某种方式触发，使我无法对其进行排序。我错过了什么吗？
这可能取决于您对数组的排序方式，但由于您分配了
this.standsData = this.drivers，因此对this.standsData的任何变异更改也会变异this.drivers下的数据，因为它们引用同一个数组。您可能想要复制驱动程序数组以放入组件状态，如下所示：methods: { test() { console.log("chamou o teste") this.standingsData = [...this.drivers]; } }请记住，在
this.standsData中深度修改其他数据也会出现类似的问题，因为您在观察器上指定deep: true；如果您必须这样做，则在将this.drivers移动到this.standsData时，您需要深度复制数据。这可以使用自定义代码或 lodash.cloneDeep 等工具来完成。这里的另一个怪癖是，默认情况下，Vue 观察者不会在组件初始化时触发。如果您希望在
drivers属性在组件初始化期间初始设置时发生变化时触发它，则需要将immediate: true添加到观察程序（文档 此处）。watch: { drivers: { deep: true, immediate: true, handler: function () { this.test(); }, }, },