How can I access the certain value more easily?


This Content is from Stack Overflow. Question asked by Khant

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: {

const fieldType = computed<string>(() => {
  switch (currentQuestion.value.type) {
    case 'multiple_choice':
      return 'MultipleChoiceField';
    case 'number':
      return 'NumberField';
      console.error('Unidentified field type');
      return '';


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

Here is child component

const props = withDefaults(
    question: QuestionnaireField;
    answer?: QuestionnaireNumberAnswer | undefined;
    additions: PrefilledAdditionalParameters;
  { answer: undefined }

    const emit = defineEmits(['allowContinue', 'editAnswer']);
    const { additions, answer, question } = toRefs(props);

Here is the nested object which I need to access the validations enter image description here


This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?