為什麼我在 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="share flexRow">
                <div class="shareReply flexColumn shareDiv">
                    <a href="javascript:;"><img class="sharerImg" src="/static/images/images/icon50.png" data-id="1"></a>
                    <span class="sharerSpan">1</span>
                </div>

                <div class="shareLike flexColumn shareDiv" onclick="ask_comment_good(171687)">
                    <a href="javascript:;" >
                                                    <img class="sharerImg" src="/static/images/images/icon52.png" data-id="2">
                                            </a>
                    <span class="sharerSpan">0</span>
                </div>
                <div class="shareLDz flexColumn shareDiv dzdiv dzdiv1 askgoodICollection" data-id="171687">
                    <a href="javascript:;" >
                                                    <img class="sharerImg " src="/static/images/images/icon37.png" data-id="5">
                                            </a>
                    <span class="sharerSpan">0</span>
                </div>
            </div>
            <script>
                $('.jbtitleimg').on('click',function(){
                    $("#layuitc").hide()
                    var layer = layui.layer;
                    layer.closeAll();
                })
                $('.jbbtn').on('click',function(){
                    $("#layuitc").hide()
                    var layer = layui.layer;
                    layer.closeAll();
                })
                $('.sharerImg').mouseenter(function(e){
                    var dataId = e.currentTarget.dataset.id
                    if(dataId == 1){
                        // $('.shareReply').find('img').attr('src','/static/images/images/icon51.png')
                    }else if(dataId == 2){
                        // $('.shareLike').find('img').attr('src','/static/images/images/icon53.png')
                    }else if(dataId == 4){
                        $('.shareShare').find('img').attr('src','/static/images/images/icon55.png')
                    }else{

                    }

                })
                $('.sharerImg').mouseleave(function(e){
                    var dataId = e.currentTarget.dataset.id
                    if(dataId == 1){
                        // $('.shareReply').find('img').attr('src','/static/images/images/icon50.png')
                    }else if(dataId == 2){
                        // $('.shareLike').find('img').attr('src','/static/images/images/icon52.png')
                    }else if(dataId == 4){
                        $('.shareShare').find('img').attr('src','/static/images/images/icon54.png')
                    }
                })
            </script>
            <div id="commentinput" class="info detail-comment-input layui-hide-sm">
                <div class="detail-ci-avator">
                    <img src="/static/images/user_avatar.jpg" alt="P粉354602955"/>
                    <div class="detail-r">
                        <span class="detail-name">P粉354602955</span>
                        <p class="detail-signal"></p>
                    </div>
                </div>
                <div id="js-reply-wrap">
                    <div id="js-reply-editor-box" class="wd-comment-box js-ci-inner edui-imooc"></div>
                    <div class="qa-ci-footer">
                        <div class="qa-ci-footright">
                            <button id="js-wenda-ci-submit" class="detail-btn" data-qid="171687">回覆</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="pinglundeplace" class="allReply ask-reply-all-list comments-content">
                <div class="arTop flexRow">
                    <div class="artLeft flexRow fontBold fontColor1">全部回覆<b class="artlb colorGrey">(1)</b></div>
                    <button class="artBtn ask-comment-answer gbaskcommentanswer">我來回復</button>
                    <button class="artBtn ask-comment-answer gbaskcomment" >關閉</button>
                </div>
                <div class="allReplayLine"></div>

                                <div class="wdsyConDiv flexRow ask_top_ul">
                    <img src="https://www.php.cn/static/images/user_avatar.jpg" alt="P粉609866533" class="wdcdImg">
                    <div class="wdcdContent flexColumn">
                        <div class="wdcdContentReply">
                            <div class="wdxqrcTop flexRow">
                                <a href="http://www.php.cn/zh-tw/member/1272196.html" target="_blank" class="wdcdcName">P粉609866533<b class="wdxqRcT colorGrey">2023-09-05 10:34:30</b></a>
                                <span class="wdxqrcTopspan colorGrey">1樓</span>
                            </div>
                            <div class="wdcdcCons"><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></div>
                            <div class="wdcdcInfo flexRow">
                                <a href="javascript:ask_reply_good(255308)"> <img class="wdxqindz" src="/static/images/images/icon27.png"></a>
                                <span class="wdxqindzspan">點贊 <b>+0</b></span>
                                <div class="wdcdcileft">
                                    <a href="javascript:;" class="wdcdciSpan reply openreply">新增回覆</a>
                                    <a href="javascript:;" class="wdcdciSpan reply closereply" style="display:none">关闭回复</a>
                                </div>
                            </div>
                                                            <div class="wdcdContentReplyss" style="display: none;">
                                    <div class="reply textarea-con">
                                        <div class="replyTop flexRow">
                                            <div class="retLeft flexRow">
                                                <img src="/static/images/user_avatar.jpg" class="retlAvatar" >
                                                <span class="retlName">P粉354602955</span>
                                            </div>
                                        </div>
                                        <textarea class="replaytext colorGrey" id="release-reply" placeholder="寫下你的回复">
                                        回覆