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

Question

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?

Answer 1

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);
});