quiero pasar un String a mi componente secundario como este, pero previamente quiero imprimirlo
este es mi componente padre
{{left.leftA}} // here show me 8 <CustomCard :left="left.leftA" export default { name: 'Parent', data() {}, setup() { onMounted(async () => { const answer = await getData(name) left.value = answer.response //{leftA:'A', leftB:'B'...} })y en mi componente hijo tengo esta declaración
export default { name: 'CustomCard', props: { left: { type: String, required: true, },Estoy recibiendo esta advertencia:
[Vue warn]: Invalid prop: type check failed for prop "left". Expected String with value "undefined", got Undefined¿Tiene algo que ver con la forma en que estoy cargando los datos? ¿Está bien usar onMounted?
Esto sucede porque el valor inicial de valor es nulo. Entonces, en el renderizado inicial arroja la advertencia, pero en otro renderizado tiene el tipo de accesorio correcto (una cadena) y se renderiza correctamente.
Tienes 3 opciones. Permita '' como una opción en la propiedad o no renderice el componente hasta que tenga los datos correctos o haga uso de la propiedad calculada.
Opción 1
{{left.leftA}} // here show me 8 <CustomCard :left="left.leftA ? left.leftA : ''"Opcion 2
{{left.leftA}} // here show me 8 <CustomCard v-if="loaded" :left="left.leftA" and in onMounted(} onMounted(async () => { const answer = await getData(name) left.value = answer.response //{leftA:'A', leftB:'B'...} // Set the loaded flag as true here. Also make sure its set as false inside the setup() })Opción-3
{{left.leftA}} // here show me 8 <CustomCard :left="sendVal" In computed.... computed: { sendVal() { if(left && left.left1) return left.left1; return ''; } }