為什麼我在 Vue 3 表單中綁定的資料在透過函數列印在控制台上時沒有更新？

Question

<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(name, 值);
    // // currActivity.value[name] = value;
    // }
</腳本>

<模板>
    <形式
        類別=“網格 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";名稱=“類別” >>
        >
        <輸入類型=“文字”; placeholder='日期' class='px-2 py-1 rounded' :value="currActivity.date"名稱=“日期” >>
        <輸入類型=“文字”; placeholder='城市' class='px-2 py-1 rounded' :value=“currActivity.city”名稱=“城市” >>
        <輸入類型=“文字”; placeholder='地點' class='px-2 py-1 rounded' :value=“currActivity.venue” name="場地"; >>
        
        <div
            v-if="editMode &&活動”
            class="flex justify-end col-span-2"
        >
            <按鈕
                text="保存"
                icon=“fa-軟碟”
                類型=“發送”
                @click="handleSubmit";
            >>
            <按鈕
                text="關閉"
                icon=“fa-xmark”
                類型=“取消”
                @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></pre>
<p>您可能會注意到我的腳本中的註解函數。我嘗試複製 React 方法並處理使用輸入元素上的“@change”觸發的更改事件的更改。後來我刪除了它們，因為這似乎不起作用。我保留了評論功能，但以防萬一有人發現它有助於查找問題。 </p></div><div class='info mb-10'><a rel="nofollow" href=" https://m.php.cn/zh-tw/member/1271689.html"><img src='https://www.php.cn/static/images/user_avatar.jpg' alt="P粉354602955"><span style="margin-left: 5px;">P粉354602955</span></a><span class='pl-10'>453 天前</span><span class='pl-10'>532 <b class="kclbcollectb"></b></span></div></div><div class="course-list discuss layui-clear bg-white"><h3>全部回覆(1)<span class="detail_answer"><span id="discuss-wenda">我來回復</span></span></h3><li class="layui-clear"><div class="discuss-img"><img src="https://www.php.cn/static/images/user_avatar.jpg"
                                          alt="P粉609866533"></div><div class="info f-left ml-10"><p><a rel="nofollow" href="https://m.php.cn/zh-tw/member/1272196.html" fid=""
                      class="replyer-name">P粉609866533</a><span>2023-09-05 10:34:30</span></p><p class="content Overflow_line"><p>您需要使用 <code>v-model</code> 而不是 <code>:value</code> 進行雙向綁定：</p>
<pre class="brush:html;toolbar:false;">   <input type="text" placeholder='Title' 
        class='col-span-3 mb-4 px-2 py-1 rounded' v-model="currActivity.title" name="title" />
    
</pre></p><span class="detail_answer2" style="float: left" fid="255308"><div class="btn wenda-second-btn" name="P粉609866533" fid="255308">回覆</div></span><i class="layui-icon layui-icon-praise wenda-praise-btn"><span>0</span></i></div></li><div class='more'></div></div><div class='discuss-submit bg-white'><li class='info layui-clear'><span class='f-left' id='discuss-submit-close'>取消</span><span class='f-left wenda-reply-text'>回覆</span></li><li class='layui-clear'><textarea type='text' rows="6" placeholder="請輸入您的評論內容" class="wenda-reply-content-text">
發布