Estoy creando una aplicación de encuestas en Vue3 con la siguiente estructura:
Estos son todos los componentes con cada uno nombrado exactamente como lo describí anteriormente.
La sección comienza a recorrer el primer nivel de preguntas:
<div v-for="question in questions" :key="question.id" v-show="question.visible"> <Question ... /> </div>Cada pregunta tiene un campo principal (que es solo una etiqueta) y llama al nombre correspondiente de la base de datos:
<template> <Field :label="title"> <component :is="getComponentByType(type.name)" ... /> </Field> </template> export default { name: 'Question', methods: { getFieldComponentByType(name) { let componentName = '' switch (name) { case 'number': componentName = 'InputNumber' break; case 'datetime': componentName = 'InputDateTime' break; case 'textarea': componentName = 'InputTextarea' break; case 'repeater': componentName = 'Repeater' break; ... etc default: componentName = 'InputText' break; } return componentName } } }Entonces también puede haber una pregunta repetida que simplemente recorre las preguntas secundarias.
<div v-for="question in questions" :key="question.id" v-show="question.visible"> <Question ... /> </div>Para la pregunta del repetidor, recibo el siguiente error de vue:
[Vue warn]: Failed to resolve component: Question If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <Repeater required=false formId=125 name=393 ... >Lo extraño es que cuando construyo esta estructura en vue2 funciona pero en vue3 no. ¿Por qué vue3 tiene conflictos cuando recupero componentes en una estructura anidada? No quiero tener que duplicar mi código, por ejemplo, en RepeaterQuestion.