He estado trabajando con un menú desplegable simple y me sigue apareciendo este error https://prnt.sc/1xdusd2 (resolví el problema de la utilería)
luego leí un poco más sobre ese problema específico y resulta que esto sucede cuando la instancia de vue no puede encontrar su propiedad.
Pero países está ahí y está dentro de la instancia. No puedo entender dónde me equivoqué.
Entonces, la idea es hacer que el menú desplegable sea reactivo a los datos de los países que obtengo de la API.
los datos solo existen en el componente principal y los estoy enviando como apoyo al componente secundario donde estoy iterando y mostrando dentro de la opción.
alguien me puede ayudar que es lo que esta mal aqui especificamente
drop down component (child component) <template> <div> <select v-for="(country, ) in countries" :key="country"> <option >{{country.name}} </option> </select> </div> </template> <script> export default { name: "DropDown", props:['countries'], data() { return { selectedOption: null, }; }, }; </script> parent component ************ <template> <div class="step1 flex flex-col"> <h1 class="self-start mb-5">Шаг 1.</h1> <div class="flex justify-center "> <h3 class="text-white font-medium text-xl">Выберите страну</h3> <div class="mx-5" > <DropDown :countries="countries" /> {{}} </div> </div> </div> </template> <script> //import Button from "./UI/Button.vue"; import DropDown from "./UI/DropDown.vue"; export default { name: "Step1", components: { DropDown: DropDown, //Button: Button, }, data() { return{ // countries: [ // { // id: "RU", // name: "Россия" // }, // { // id: "DE", // name: "Германия" // }, // { // id: "EE", // name: "Эстония" // } // ], } }, methods:{ async fetchCountry (){ const res = await fetch('api/countries') let countries = await res.json(); return countries } }, created() { } };Vue intenta cargar los datos de su país antes de que finalice la recuperación de API, para omitir esto, agregue v-if="countries" en su <select v-for="(country, ) in countries" :key="country"> , entonces vue solo intentará cargarlo si los países no son nulos
Debe tener países en sus datos para que funcione en la plantilla, intente esto en su padre:
import DropDown from "./UI/DropDown.vue"; export default { name: "Step1", components: { DropDown, }, data() { return { countries: [], } }, methods: { async fetchCountry() { const res = await fetch('api/countries') this.countries = await res.json(); } }, };Y esto en tu hijo
<template> <select v-model="selectedOption"> <option v-for="country in countries" :key="country.name" :value="country.name" > {{ country.name }} </option> </select> </template> <script> export default { name: "DropDown", props: { countries: { type: Array, default: () => [], }, }, data() { return { selectedOption: null, }; }, }; </script>