Mengapakah data yang saya ikat dalam borang Vue 3 tidak dikemas kini apabila dicetak pada konsol melalui fungsi?

Question

Saya telah mencipta komponen borang dalam Vue 3 dan saya cuba mengikat objek rujukan kepada elemen input, berdasarkan pemahaman saya tentang pengikatan dua hala dan cara Vue telah berkelakuan dalam kerja-kerja lepas saya yang saya harapkan sebarang perubahan akan menjejaskan rujukan saya kepada objek segera tanpa sebarang manipulasi seperti yang saya ada kaitan dengan komponen React dengan mencetuskan acara reaktif "onChange".

Walau bagaimanapun, apabila saya mengklik butang "Simpan" untuk mencetuskan fungsi yang mengeluarkan objek yang dirujuk, nampaknya hanya mengekalkan nilai yang dimuatkan pada asalnya dan bukan sebarang perubahan yang saya buat dalam input. Bolehkah sesiapa menjelaskan mengapa?

Ini ialah kod untuk komponen saya. Ia akan dimuatkan dalam tetingkap pop timbul.

<script setup lang="ts">
    jenis import { Aktiviti } daripada '@/models/activity';
    import { ref } daripada "vue";
    import Butang daripada '../../common/Button.vue';

    defineEmits([
        "bentuk rapat"
    ]);
    const props = defineProps<{
        tajuk?: Rentetan,
        aktiviti?: Aktiviti,
        editMod: Boolean
    }>();

    const initialState = props.activity ?? {
        ID: '',
        tajuk: '',
        kategori: '',
        keterangan: '',
        Tarikh: '',
        bandar: '',
        tempat: ''
    }

    const currActivity = ref<Aktiviti>(initialState);

    const handleSubmit = () => {
        console.log(currActivity.value);
    }

    // const handleInputChange = (event: Event) => {
    // const {name, value} = event.target sebagai HTMLInputElement;
    // console.log(nama, nilai);
    // // currActivity.value[name] = nilai;
    // }
</skrip>

<template>
    <bentuk
        class="grid grid-cols-5 gap-4 mb-8"
        @submit="handleSubmit"
        autolengkap="dimatikan"
    >
        <h2
            v-jika="tajuk"
            class="col-span-5 mb-4 text-white text-3xl font-semibold"
        >
            {{ tajuk }}</h2>

        <jenis input="teks" pemegang tempat='Title' class='col-span-3 mb-4 px-2 py-1 rounded' :value="currActivity.title" nama="tajuk" />
        <jenis input="teks" pemegang tempat='Kategori' kelas='mb-4 px-2 py-1 dibundarkan' :value="currActivity.category" nama="kategori" />
        <textarea placeholder='Description' class='col-span-5 mb-4 px-2 py-1 rounded' :value="currActivity.description" nama="keterangan" />
        <jenis input="teks" pemegang tempat='Date' class='px-2 py-1 rounded' :value="currActivity.date" nama="tarikh" />
        <jenis input="teks" pemegang tempat='City' class='px-2 py-1 rounded' :value="currActivity.city" nama="bandar" />
        <jenis input="teks" pemegang tempat='Tempat' kelas='px-2 py-1 dibundarkan' :value="currActivity.venue" nama="tempat" />
        
        <div
            v-if="editMode && aktiviti"
            class="flex justify-end col-span-2"
        >
            <Butang
                text="Simpan"
                icon="fa-floppy-disk"
                type="hantar"
                @click="mengendalikanSerah"
            />
            <Butang
                text="Tutup"
                icon="fa-xmark"
                type="batal"
                @click="$emit('close-form')"
            />
        </div>
        <div 
            v-lain 
            class='flex justify-end col-span-2'
        >
            <Butang
                text="Catatan"
                icon="pesawat-kertas-fa"
                type="hantar"
                @click="mengendalikanSerah"
            />
        </div>
    </form>
</template>

您可能会注意到我的脚本中的注释函数。我尝试复制 Bertindak balas改事件的更改。后来我删除了它们，因为这似乎不起作用。我保留了评论功能，但以防万一有人发现它有助于查找问题。

Answer 1

Anda perlu menggunakan v-model 而不是 :value untuk pengikatan dua hala:

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