<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(名称, 值);
// // currActivity.value[name] = value;
// }
</脚本>
<模板>
<形式
class="网格 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";名称=“类别” >>
