cari

Rumah  >  Soal Jawab  >  teks badan

Dalam kaedah yang dipasang, nilai prop Nuxt 3 tidak diterima buat kali pertama.

Saya sedang mengusahakan Nuxt 3 dan saya menghadapi masalah dengan prop. Saya menghantar objek dari komponen induk kepada komponen anak melalui prop tetapi apabila saya mencetak prop ini dalam konsol objek itu nampaknya kosong tetapi jika saya meletakkan konsol yang sama di bawah fungsi setTimeout di dalam kaedah yang dipasang maka Ia akan berfungsi dengan baik. Semak kod di bawah untuk lebih banyak idea.

Komponen induk

<template>
  <ChildComponent
    :form-data="formData.childData"
  />
<script setup>
const formData = reactive({
 ...
 ...
});

onMounted(() => {
  const { data, error } = await useFetch("my-api-url");
  if (data.value) {
    formData = data.value;
  }
});
</script>
</template>

Subkomponen

<template>
  {{ }}
<script setup>
const props = defineProps({
  formData: {
    type: Object,
    required: true,
    default: "",
  },
});

onMounted(() => {
  console.log(props.formData); // **Receiving blank object**

  setTimeout(() => {
      console.log(props.formData); // **Receiving perfectly **
  }, 1000) 
});
</script>
</template>

Saya cuba menggunakan fungsi async onMounted( async () => { ... }) pada onMounted tetapi ia tidak berfungsi.

Adakah terdapat sebarang pilihan standard untuk menggunakan prop pada onMounted tanpa menggunakan fungsi setTimeout. Tolong bantu saya menyelesaikan masalah ini?

P粉418351692P粉418351692524 hari yang lalu705

membalas semua(1)saya akan balas

  • P粉041856955

    P粉0418569552023-07-20 15:20:39

    Sebelum memanggil await useFetch("my-api-url") dalam komponen induk, komponen anak telah dipasang, jadi apabila useFetch() mendapat data, anda akan mendapat objek kosong sebagai prop.

    Jika anda ingin mendengar apabila props bertukar, anda boleh menggunakan jam tangan:

    watch(() => props.formData, (old, new) => {
        console.log(new);
    }); 

    balas
    0
  • Batalbalas