我有一個模態組件，它接收一個物件作為v-model。這個物件包含一些鍵，如id或name。
現在如果我這樣做：
<template>
<div class="h-2/3 w-2/3 bg-green-500" >
<輸入 v-model="computedValue.id" />
{{computedValue}}
</div>
</template>
<腳本>
出口默認 {
名稱：'TestModal'。
道具： {
modelValue。{
型別。物件。
},
},
發出。["update:modelValue"]。
資料。() => ({
}),
計算的。{
computedValue。{
get() {
回傳 this.modelValue。
},
設定（newValue） {
console.log("computedValue?")
this.$emit('update:modelValue', newValue)
}
},
},
方法：{
},
}
</script>
console.log("computedValue?")從未被觸發，也沒有發射。
我怎樣才能使用一個 "深度設定器 "呢？
uj5u.com熱心網友回復：
我對此使用的方法如下。將屬性的初始 "副本 "作為一個資料變數（rwModel）。使用v-model來與這個變數進行互動，然后使用一個觀察者來觸發事件/在變數發生變化時做一些作業。
優點是您從未嘗試過修改該屬性，但您也做了最低限度的作業來避免這種情況，因此它仍然易于測驗和理解。您還可以在觀察器中獲得舊值，這使得進行比較變得容易。
另外，您可以輕松地將其修改為擁有一個事件，以觸發對更新資料的處理--比如表單上的保存按鈕。
<template>
<div class="h-2/3 w-2/3 bg-green-500" >
<input v-model="rwModel.id" />
{{rwModel}}。
</div>
</template>
<script>
出口默認 {
道具： {
modelValue。{
型別。物件。
},
},
發出。["update:modelValue"]。
資料() {
回傳 {
rwModel：this.modelValue。
}
},
觀察。{
modelValue。{
深度：真。
handler(newValue) {
console.log("watchedValue?")
this.$emit('update:modelValue', newValue)
},
},
},
}
</script>
uj5u.com熱心網友回復：
發生了什么：在一個<input>元素上，v-model="property"基本等同于
:value="property" @input="property = $event",
這在你的代碼中翻譯成
:value="computedValue.id" @input="computedValue.id = $event"。
這將設定id，但是計算的setter將永遠不會觸發，因為你正在設定computedValue。
解決方案：既然你想使用一個內部屬性，你想要的是對 @input 事件的更精細的控制。所以你可以簡單地替換你的輸入的
<
v-model="computedValue.id"改為
:value="computedValue.id" @input="computedValue = $event"
這將觸發你的計算設定器，并列印控制臺陳述句。
注意：盡管
標籤： 上一篇：什么是Vuetifyv-menu組件的"保存"方法？
下一篇：如何根據選擇更新單選按鈕組
computedValue = $event使它看起來像我們在將computedValue設定為輸入的值，但事實并非如此。因為我們已經為計算屬性寫了一個設定器，Vue 智能地在陳述句被執行時觸發了設定器。