搜索

首页  >  问答  >  正文

为什么我在 Vue 3 表单中绑定的数据在通过函数打印在控制台上时没有更新？

<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";名称=“类别” >>