Pourquoi les données que je lie dans un formulaire Vue 3 ne sont-elles pas mises à jour lorsqu'elles sont imprimées sur la console via une fonction ?

Question

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.

<configuration du script lang="ts">
    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<Activity>(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 ;
    // }
</script>

<modèle>
    <formulaire
        class = "grid grid-cols-5 gap-4 mb-8"
        @submit="handleSubmit"
        autocomplete="off"
    >
        <h2
            v-if = "titre"
            class = "col-span-5 mb-4 texte-blanc texte-3xl police-semibold"
        >
            {{ titre }}</h2>

        <type d'entrée="texte" placeholder='Titre' class='col-span-3 mb-4 px-2 py-1 arrondi' :value="currActivity.title" nom="titre" />
        <type d'entrée="texte" placeholder='Catégorie' class='mb-4 px-2 py-1 arrondi' :value="currActivity.category" nom = "catégorie" />
        <textarea placeholder='Description' class='col-span-5 mb-4 px-2 py-1 arrondi' :value="currActivity.description" nom = "description" />
        <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>

触发的更改事件的更改。后来我删除了它们，因为这似乎不起作用。我保留了评论功能，但以防万一有人发现它有助于查找问题。

Answer 1

Vous devez utiliser v-model 而不是 :value pour une reliure bidirectionnelle :

   <input type="text" placeholder='Title' 
        class='col-span-3 mb-4 px-2 py-1 rounded' v-model="currActivity.title" name="title" />