I am coming from the React background so I don't really know much about Vue. The thing is I need to fix some stuff in a Vue project.
In the Parent component.
import NumberField from '../fields/NumberField.vue'; //Child component
export default defineComponent({
name: 'Questionnaire',
components: {
MultipleChoiceField,
NumberField,
....
},
});
const fieldType = computed<string>(() => {
questionTitleAttribute();
switch (currentQuestion.value.type) {
case 'multiple_choice':
return 'MultipleChoiceField';
case 'number':
return 'NumberField';
default:
console.error('Unidentified field type');
return '';
}
});
<div>
<component
id="current"
:is="fieldType"
:question="currentQuestion"
:answer="currentAnswer"
:show-insights="showInsights"
:additions="additions"
:set-question="setQuestion"
/>
</div>
As you can see it is choosing from multiple field and use the appropriate one. But the thing is currently you can see the statement :question="currentQuestion"
What I want to do is I want to access the currentQuestion.validation in the child component. But It is kind of complicated when I try to console.log in the child component. Is there better way to get the value directly?
Here is child component
const props = withDefaults(
defineProps<{
question: QuestionnaireField;
answer?: QuestionnaireNumberAnswer | undefined;
additions: PrefilledAdditionalParameters;
}>(),
{ answer: undefined }
);
const emit = defineEmits(['allowContinue', 'editAnswer']);
const { additions, answer, question } = toRefs(props);
console.log('-----');
console.log(question);
console.log('-----');
Here is the nested object which I need to access the validations. This is the image of question log 