<p>我在Vue 3 中創建了一個表單組件，我試圖將引用對象綁定到輸入元素，根據我對雙向綁定的理解以及Vue 在我過去的作品中的行為方式，我預計任何更改都會影響我的參考立即對象，而不需要任何操作，就像我必須透過觸發「onChange」反應事件來處理React 元件一樣。 </p>
<p>但是，當我點擊「儲存」按鈕來觸發輸出引用物件的函數時，它似乎只保留最初載入的值，而不保留我在輸入中所做的任何變更。誰能解釋一下為什麼嗎？ </p>
<p>這是我的組件的程式碼。它會在彈出視窗中載入。</p>
<腳本設定lang=“ts”>
從'@/models/activity'導入類型{Activity}；
從“vue”導入{ref}；
從 '../../common/Button.vue' 導入按鈕；
定義發出([
“封閉形式”
]);
const 道具 = DefineProps<{
標題？：字串，
活動？： 活動，
編輯模式：布林值
}>();
const 初始狀態 = props.activity ?? {
ID： ''，
標題： ''，
類別： ''，
描述： ''，
日期： ''，
城市： ''，
地點：''
}
const currActivity = ref(initialState);
const handleSubmit = () =>; {
console.log(currActivity.value);
}
// const handleInputChange = (event: Event) =>; {
// const {name, value} = event.target as HTMLInputElement;
// console.log(name, 值);
// // currActivity.value[name] = value;
// }
</腳本>
<模板>
<形式
類別=“網格 grid-cols-5 間隙-4 mb-8”
@submit="handleSubmit";
自動完成=“關閉”
>
{{ 標題 }}
</h2>
<輸入類型=“文字”; placeholder='標題' class='col-span-3 mb-4 px-2 py-1 rounded' :value=“currActivity.title”名稱=“標題” >>
<輸入類型=“文字”; placeholder='類別' class='mb-4 px-2 py-1 rounded' :value="currActivity.category";名稱=“類別” >>
