Vue組件的基礎結構；
Users.Vue（父組件）
EditUserModal.vue（子組件）
我有一個用戶資料表，當用戶選擇一個用戶時，這個資料屬性會隨所選用戶更新（在 Users.vue 中）；
selectedUser: {}
我有一個模態組件，它將所選用戶作為道具
<edit-user-modal :selected-user="selectedUser"></edit-user-modal>
模態有一個表單，該表單根據發送的資料更新值
我希望表單如何操作- 我希望用戶能夠編輯表單上的資料，表單將根據所選用戶預先填寫
我的問題- 我想將選定的用戶道具克隆到一個新的資料物件中，這樣當用戶開始填寫表單時，克隆的資料物件將得到更新，而不是道具
我試過的
props: ['selectedUser'],
mounted() {
if (!_.isEmpty(this.selectedUser)) {
this.clonedUserObject = Object.assign({}, this.selectedUser)
}
},
data() {
return {
clonedUserObject: {}
}
},
還
props: ['selectedUser'],
data() {
return {
clonedUserObject: Object.assign({}, this.selectedUser)
}
},
兩次，當我選擇用戶時，資料屬性 clonedUserObject 都為空
uj5u.com熱心網友回復：
這很可能是因為道具在mounted運行時沒有準備好。這可以通過通過除錯工具檢查或console.log當時是否填充道具來確定。
在這種情況下，解決方案是使用觀察者。例如：
watch: {
selectedUser: {
// This will make sure it picks up your prop if it is set at the start,
// allowing you to fully remove the mounted hook
immediate: true,
// If you need to check if a single internal property of the selectedUser changed
// also set deep: true
deep: true,
handler: (val) {
this.clonedUserObject = Object.assign({}, val);
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/368240.html
標籤：Vue.js