<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(); }, }, },