Vue 3 menghapuskan kereaktifan prop komponen

Question

Saya mempunyai komponen EditTransaction dan memanggilnya seperti ini:

<edit-transaction
    v-if="editableTransaction.id === transaction.id"
    :key="'transaction'+transaction.id+etcount"
    :class="{'bg-red-300': type === 'expense', 'bg-green-300': type === 'income'}"
    :groups-prop="modelValue"
    :transaction="transaction"
    class="planning-transactions-item px-10 rounded-2xl w-[90%]"
    @close="editableTransaction = {id: null}">
</edit-transaction>

Seperti yang anda lihat, saya menghantar objek transaksi di dalamnya. Oleh kerana ini ialah editor, saya tidak mahu objek transaksi menjadi reaktif. Jika seseorang menutup editor, saya mahu objek transaksi asal bukan objek transaksi yang diubah suai, jadi jika saya betul dan mahu mengalih keluar proksi, saya akan meletakkannya dalam editor:

const form = toRaw(props.transaction)

Di dalam templat editor, terdapat beberapa komponen aset dengan nilai model vnya terikat pada objek bentuk

<div class="flex gap-5 w-full">
    <FormInput id="et-date" v-model="form.due_date" class="et-fields tw-fields w-[150px]"
               placeholder="Date"
               type="date"
               @keyup.enter="saveChanges"></FormInput>
    <FormInput id="et-name" v-model="form.name" class="et-fields tw-fields" placeholder="Name"
               @keyup.enter="saveChanges"></FormInput>
    <FormInput id="et-value" v-model="form.value" class="et-fields tw-fields" mask-thousand
               placeholder="Value"
               @keyup.enter="saveChanges"></FormInput>
</div>

Masalahnya ialah apabila saya menukar nama transaksi, objek borang berubah dan juga sifat transaksi berubah. Oleh itu, nama dalam data induk juga berubah kerana sifat transaksi adalah reaktif. Apa yang saya lakukan salah atau bagaimana saya boleh melaksanakan objek bentuk yang nilainya diisi pada penciptaan komponen menggunakan nilai prop dan tanpa sebarang perwakilan?

Answer 1

Sudah biasa menggunakan prop untuk menghantar nilai awal kepada keadaan komponen kanak-kanak. Ini bermakna anda "menyalin" nilai prop dalam tempatan data. Ia memastikan bahawa nilai prop dilindungi daripada perubahan yang tidak dijangka: Baca lebih lanjut dalam dokumentasi Vue

Berikut adalah contoh yang sangat mudah menunjukkan kaedah di atas:

/komponen-anak-anda-vue/

export default {
  props: ['initialCounter'],
  data() {
    return {
      // counter only uses this.initialCounter as the initial value;
      // it is disconnected from future prop updates.
      counter: this.initialCounter
    }
  }
}

Sekarang, membaca contoh anda, saya nampak anda cuba mengemas kini beberapa data dalam borang, dan anda tidak mahu menukar maklumat awal melainkan disahkan melalui butang atau sesuatu. Proses untuk menyelesaikan masalah ini ialah:

• Luluskan data awal yang mungkin diubah oleh pengguna sebagai prop.
• Jika pengguna menukar beberapa data melalui elemen input, tetapi tidak mengesahkan perubahan tersebut (melalui butang), biarkan data tidak berubah (ini bermakna anda tidak mengeluarkan sebarang perubahan kepada elemen induk, pastikan nilai prop tidak berubah)
• Jika pengguna menukar beberapa data dan mengesahkannya, hantar data yang dikemas kini kepada ibu bapa (this.$emit) supaya ia mengetahui tentang perubahan tersebut.

Answer 2

Jadi saya jumpa dua penyelesaian:

const form = reactive({...props.transaction})

atau

const form = Object.assign({}, props.transaction)

Kedua-duanya berfungsi, apabila saya menukar nilai bentuk ia tidak mengubah prop.