我在 Vue 3 中创建了一个表单组件，我试图将引用对象绑定到输入元素，根据我对双向绑定的理解以及 Vue 在我过去的作品中的行为方式，我预计任何更改都会影响我的引用立即对象，而不需要任何操作，就像我必须通过触发“onChange”反应事件来处理 React 组件一样。
但是，当我单击“保存”按钮来触发输出引用对象的函数时，它似乎只保留最初加载的值，而不保留我在输入中所做的任何更改。谁能解释一下为什么吗？
这是我的组件的代码。它会在弹出窗口中加载。
<脚本设置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" ; 自动完成="“关闭”">
{{ 标题 }}
<输入类型=“文本”; 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";名称=“类别” >>
