J'ai créé un composant de formulaire dans Vue 3 et j'essaie de lier un objet de référence à un élément d'entrée, en fonction de ma compréhension de la liaison bidirectionnelle et de la façon dont Vue s'est comportée dans mes travaux passés. tout changement affectera ma référence à l'objet immédiat sans aucune manipulation comme je dois le faire avec les composants React en déclenchant l'événement réactif "onChange".

Cependant, lorsque je clique sur le bouton "Enregistrer" pour déclencher la fonction qui génère l'objet référencé, il semble conserver uniquement la valeur qui a été initialement chargée et aucune modification que j'ai apportée à l'entrée. Quelqu'un peut-il expliquer pourquoi ?

Voici le code de mon composant. Il se chargera dans une fenêtre contextuelle.

 importer le type {Activité} depuis '@/models/activity' ; importer { ref } depuis "vue" ; importer le bouton depuis '../../common/Button.vue' ; définirEmits([ "fermer le formulaire" ]); const props = définirProps<{ titre ? : chaîne, activité ? : Activité, mode d'édition : booléen }>(); const initialState = props.activité ?? { identifiant: '', titre: '', catégorie: '', description: '', date: '', ville: '', lieu: '' } const currActivity = ref(initialState); const handleSubmit = () => { console.log(currActivity.value); } // const handleInputChange = (événement : événement) => { // const {nom, valeur} = event.target as HTMLInputElement ; // console.log(nom, valeur); // // currActivity.value[nom] = valeur ; // }    
 {{ titre }}
    <type d'entrée="texte" placeholder='Date' class='px-2 py-1 arrondi' :value="currActivity.date" nom="date" /> <type d'entrée="texte" placeholder='City' class='px-2 py-1 arrondi' :value="currActivity.city" nom="ville" /> <type d'entrée="texte" placeholder='Venue' class='px-2 py-1 arrondi' :value="currActivity.venue" name="lieu" /> <div v-if="editMode && activité" class = "flex justifier-fin col-span-2" > <Bouton text="Enregistrer" icon="fa-floppy-disk" tapez = "envoyer" @click="handleSubmit" /> <Bouton text="Fermer" icon="fa-xmark" tapez = "annuler" @click="$emit('close-form')" /> </div> <div v-sinon class='flex justifier-fin col-span-2' > <Bouton text="Publier" icon="fa-paper-avion" tapez = "envoyer" @click="handleSubmit" /> </div> </formulaire> </template></pre> <p>触发的更改事件的更改。后来我删除了它们，因为这似乎不起作用。我保留了评论功能，但以防万一有人发现它有助于查找问题。</p>
     </div>
     <div class="share flexRow">
      <div class="shareReply flexColumn shareDiv">
       <a href="javascript:;"><img class="sharerImg" src="//m.sbmmt.com/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="//m.sbmmt.com/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="//m.sbmmt.com/static/images/images/icon37.png" data-id="5"></a>
       <span class="sharerSpan">0</span>
      </div>
     </div>
     <div id="commentinput" class="info detail-comment-input layui-hide-sm">
      <div class="detail-ci-avator">
       <img src="//m.sbmmt.com/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">répondre</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">
        répondre à tous
        <b class="artlb colorGrey">(1)</b>
       </div>
       <button class="artBtn ask-comment-answer gbaskcommentanswer">je répondrai</button>
       <button class="artBtn ask-comment-answer gbaskcomment">Fermer</button>
      </div>
      <div class="allReplayLine"></div>
      <div class="wdsyConDiv flexRow ask_top_ul">
       <img src="//m.sbmmt.com/static/images/user_avatar.jpg" alt="P粉609866533" class="wdcdImg">
       <div class="wdcdContent flexColumn">
        <div class="wdcdContentReply">
         <div class="wdxqrcTop flexRow">
          <a href="//m.sbmmt.com/fr/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 plancher</span>
         </div>
         <div class="wdcdcCons">
          <p>Vous devez utiliser<code>v-model</code>而不是<code>:value</code>pour une reliure bidirectionnelle :</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="//m.sbmmt.com/static/images/images/icon27.png"></a>
          <span class="wdxqindzspan">Comme<b>+0</b></span>
          <div class="wdcdcileft">
           <a href="javascript:;" class="wdcdciSpan reply openreply">Ajouter une réponse</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="//m.sbmmt.com/static/images/user_avatar.jpg" class="retlAvatar">
             <span class="retlName">P粉354602955</span>
            </div>
           </div>
           <textarea class="replaytext colorGrey" id="release-reply" placeholder="Écrivez votre réponse">
           répondre