Vue3表单绑定数据点击保存后控制台打印未更新，求原因解析

问题根源 #

你现在用的:value="currActivity.title"是单向数据绑定——只能把currActivity里的值渲染到输入框，但输入框的用户输入不会自动同步回currActivity对象。Vue的双向绑定核心是v-model，它本质上是:value加上@input事件的语法糖，能自动把输入框的变化同步到数据对象里。

另外你之前尝试的handleInputChange函数没生效，是因为你注释了关键的赋值代码currActivity.value[name] = value;，不过其实完全没必要手动写这个逻辑，用v-model更简洁高效。

修复步骤 #

只需要把模板里所有的:value替换成v-model即可：

修改后的模板输入框部分代码：

<input type="text" placeholder='Title' class='col-span-3 mb-4 px-2 py-1 rounded' v-model="currActivity.title" name="title" />
<input type="text" placeholder='Category' class='mb-4 px-2 py-1 rounded' v-model="currActivity.category" name="category" />
<textarea placeholder='Description' class='col-span-5 mb-4 px-2 py-1 rounded' v-model="currActivity.description" name="description" />
<input type="text" placeholder='Date' class='px-2 py-1 rounded' v-model="currActivity.date" name="date" />
<input type="text" placeholder='City' class='px-2 py-1 rounded' v-model="currActivity.city" name="city" />
<input type="text" placeholder='Venue' class='px-2 py-1 rounded' v-model="currActivity.venue" name="venue" />

额外注意点 #

1. 因为currActivity是用ref包裹的对象，Vue在模板里会自动帮你解包，所以直接写currActivity.title是正确的，不需要手动加.value。
2. 如果props.activity是父组件传递的响应式对象，初始化initialState的时候建议做深拷贝，避免不小心修改父组件的状态：

const initialState = props.activity ? JSON.parse(JSON.stringify(props.activity)) : {
    id: '',
    title: '',
    category: '',
    description: '',
    date: '',
    city: '',
    venue: ''
}

这样修改后，输入框的内容变化会自动同步到currActivity，点击Save按钮就能在控制台看到最新的值了。

内容的提问来源于stack exchange，提问作者Muhtasim Fuad Showmik