<p>Ich habe eine Formularkomponente in Vue 3 erstellt und versuche, ein Referenzobjekt an ein Eingabeelement zu binden, basierend auf meinem Verständnis der bidirektionalen Bindung und dem Verhalten von Vue in meinen früheren Arbeiten, das ich erwarte Alle Änderungen wirken sich auf meinen Verweis auf das unmittelbare Objekt aus, ohne dass eine Manipulation erforderlich ist, wie ich es bei React-Komponenten tun muss, indem ich das reaktive Ereignis „onChange“ auslöse. </p> <p>Wenn ich jedoch auf die Schaltfläche „Speichern“ klicke, um die Funktion auszulösen, die das referenzierte Objekt ausgibt, scheint sie nur den ursprünglich geladenen Wert beizubehalten und keine Änderungen, die ich an der Eingabe vorgenommen habe. Kann jemand erklären, warum? </p> <p>Dies ist der Code für meine Komponente. Es wird in einem Popup-Fenster geladen.</p> <pre class="brush:php;toolbar:false;"><script setup lang="ts"> import type { Activity } from '@/models/activity'; import { ref } aus „vue“; Button aus '../../common/Button.vue' importieren; defineEmits([ "Close-Form" ]); const props = defineProps<{ Titel?: String, Aktivität?: Aktivität, editMode: Boolean }>(); const initialState = props.activity ?? { Ausweis: '', Titel: '', Kategorie: '', Beschreibung: '', Datum: '', Stadt: '', Veranstaltungsort: '' } 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> <Vorlage> <form class="grid grid-cols-5 gap-4 mb-8" @submit="handleSubmit" Autovervollständigung="aus" > <h2 v-if="Titel" class="col-span-5 mb-4 text-white text-3xl font-semibold" > {{ Titel }}</h2> <Eingabetyp="Text" placeholder='Title' class='col-span-3 mb-4 px-2 py-1 gerundet' :value="currActivity.title" name="Titel" /> <Eingabetyp="Text" placeholder='Category' class='mb-4 px-2 py-1 gerundet' :value="currActivity.category" name="Kategorie" /> <textarea placeholder='Description' class='col-span-5 mb-4 px-2 py-1 gerundet' :value="currActivity.description" name="Beschreibung" /> <Eingabetyp="Text" placeholder='Datum' class='px-2 py-1 gerundet' :value="currActivity.date" name="Datum" /> <Eingabetyp="Text" placeholder='City' class='px-2 py-1 gerundet' :value="currActivity.city" name="Stadt" /> <Eingabetyp="Text" placeholder='Venue' class='px-2 py-1 gerundet' :value="currActivity.venue" name="Veranstaltungsort" /> <div v-if="editMode && Aktivität" class="flex justify-end col-span-2" > <Schaltfläche text="Speichern" icon="fa-floppy-disk" type="senden" @click="handleSubmit" /> <Schaltfläche text="Schließen" icon="fa-xmark" type="Abbrechen" @click="$emit('close-form')" /> </div> <div v-sonst class='flex justify-end col-span-2' > <Schaltfläche text="Beitrag" icon="fa-paper-plane" type="senden" @click="handleSubmit" /> </div> </form> </template></pre> <p>触发的更改事件的更改.后来我删除了它们,因为这似乎不起作用.我保留了评论功能,但以防万一有人发现它有助于查找问题.</p>

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