Warum werden die Daten, die ich in einem Vue 3-Formular binde, nicht aktualisiert, wenn sie über eine Funktion auf der Konsole gedruckt werden?

Question

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.

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?

Dies ist der Code für meine Komponente. Es wird in einem Popup-Fenster geladen.

<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>

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

Answer 1

您需要使用 v-model 而不是 :value 进行双向绑定：

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