我在 Vue 3 中创建了一个表单组件，我试图将引用对象绑定到输入元素，根据我对双向绑定的理解以及 Vue 在我过去的作品中的行为方式，我预计任何更改都会影响我的引用立即对象，而不需要任何操作，就像我必须通过触发“onChange”反应事件来处理 React 组件一样。

但是，当我单击“保存”按钮来触发输出引用对象的函数时，它似乎只保留最初加载的值，而不保留我在输入中所做的任何更改。谁能解释一下为什么吗？

这是我的组件的代码。它会在弹出窗口中加载。

<script setup lang="ts">
    import type { Activity } from '@/models/activity';
    import { ref } from "vue";
    import Button from '../../common/Button.vue';

    defineEmits([
        "close-form"
    ]);
    const props = defineProps<{
        title?: String,
        activity?: Activity,
        editMode: Boolean
    }>();

    const initialState = props.activity ?? {
        id: '',
        title: '',
        category: '',
        description: '',
        date: '',
        city: '',
        venue: ''
    }

    const currActivity = ref<Activity>(initialState);

    const handleSubmit = () => {
        console.log(currActivity.value);
    }

    // const handleInputChange = (event: Event) => {
    //     const {name, value} = event.target as HTMLInputElement;
    //     console.log(name, value);
    //     // currActivity.value[name] = value;
    // }
</script>

<template>
    <form
        class="grid grid-cols-5 gap-4 mb-8"
        @submit="handleSubmit"
        autocomplete="off"
    >
        <h2
            v-if="title"
            class="col-span-5 mb-4 text-white text-3xl font-semibold"
        >
            {{ title }}
        </h2>

        <input type="text" placeholder='Title' class='col-span-3 mb-4 px-2 py-1 rounded' :value="currActivity.title" name="title" />
        <input type="text" placeholder='Category' class='mb-4 px-2 py-1 rounded' :value="currActivity.category" name="category" />
        <textarea placeholder='Description' class='col-span-5 mb-4 px-2 py-1 rounded' :value="currActivity.description" name="description" />
        <input type="text" placeholder='Date' class='px-2 py-1 rounded' :value="currActivity.date" name="date" />
        <input type="text" placeholder='City' class='px-2 py-1 rounded' :value="currActivity.city" name="city" />
        <input type="text" placeholder='Venue' class='px-2 py-1 rounded' :value="currActivity.venue" name="venue" />
        
        <div
            v-if="editMode && activity"
            class="flex justify-end col-span-2"
        >
            <Button
                text="Save"
                icon="fa-floppy-disk"
                type="send"
                @click="handleSubmit"
            />
            <Button
                text="Close"
                icon="fa-xmark"
                type="cancel"
                @click="$emit('close-form')"
            />
        </div>
        <div 
            v-else 
            class='flex justify-end col-span-2'
        >
            <Button
                text="Post"
                icon="fa-paper-plane"
                type="send"
                @click="handleSubmit"
            />
        </div>
    </form>
</template>

您可能会注意到我的脚本中的注释函数。我尝试复制 React 方法并处理使用输入元素上的“@change”触发的更改事件的更改。后来我删除了它们，因为这似乎不起作用。我保留了评论功能，但以防万一有人发现它有助于查找问题。