vuejs2 vee-validate 3 dynamic radio

Question

I am building a Form Wizard with multiple questions, each question has multiple radio options, but i not able to validate each question, always receive and error, heres is the source code

In the variable poll are stored the questions and each one has the possible answers

The Form Wizard hasta a multiple Tabs, each one with a question and each one with a radio button for each answer

I have tried with one question in order to avoid the possible duplicated data, but i was no be able to validate correctly using the vee-validate

I am using VueJS 2.6.x and vee-validate 3.4.14 more specifically using the Vuexy Template and JavaScript not TypeScript

<template>
  <div v-if="poll">
    <form-wizard
      color="#7367F0"
      :title="null"
      :subtitle="null"
      layout="horizontal"
      shape="square"
      finish-button-text="Submit"
      back-button-text="Previous"
      class="wizard-horizontal mb-3"
      @on-complete="formSubmitted"
    >
      <!-- Question/Answers details tab -->
      <template v-for="question in poll.questions">
        <tab-content
          :key="question.id"
          :before-change="validationForm"
        >
          <validation-observer
            ref="questionRules"
            tag="form"
          >
            <b-card-text>
              <h4>
                {{ question.question }}
              </h4>
            </b-card-text>

            <validation-provider
              #default="{ errors }"
              :name="'question-' + question.id"
              rules="required|numeric"
            >
              <b-form-radio
                v-for="answer in question.answers"
                :id="'question-' + question.id + '-answer-' + answer.id"
                :key="answer.id"
                v-model="Selected"
                :value="answer.id"
                :name="'question-' + question.id"
                class="mt-2 mb-25"
              >
                {{ answer.answer }}
              </b-form-radio>
              <div class="mt-2">
                <small class="text-danger">{{ errors[0] }}</small>
              </div>
            </validation-provider>
          </validation-observer>
        </tab-content>
      </template>
    </form-wizard>
  </div>
</template>

<script>
import { FormWizard, TabContent } from 'vue-form-wizard'
import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'
import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'
import { required, numeric } from 'vee-validate/dist/rules'

import {
  BFormRadio,
  BCardText,
} from 'bootstrap-vue'
import index from 'vue-prism-component'
import { title } from '@core/utils/filter'
import { codeIcon } from './code'

extend('required', required)
extend('numeric', numeric)

export default {
  components: {
    ValidationObserver,
    FormWizard,
    TabContent,
    BFormRadio,
    BCardText,
    ValidationProvider,
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    poll: null,
  },
  data() {
    return {
      required,
      numeric,
      codeIcon,
      Selected: null,
    }
  },
  methods: {
    formSubmitted() {
      this.$toast({
        component: ToastificationContent,
        props: {
          title: 'Form Submitted',
          icon: 'EditIcon',
          variant: 'success',
        },
      })
    },
    validationForm() {
      return new Promise((resolve, reject) => {
        this.$refs.questionRules.validate().then(success => {
          if (success) {
            resolve(true)
          } else {
            reject()
          }
        })
      })
    },
  },
}
</script>

The view is loaded correctly, at least as is expected

Exist a walkaround in case not be possible as i implemented?

Thanks in advance

Answer 1

Here is the solution

Is necessary use the [0] index, thanks a lot!

validationForm() {
  return new Promise((resolve, reject) => {
    this.$refs.questionRules[0].validate().then(success => {
      if (success) {
        resolve(true)
      } else {
        reject()
      }
    })
  })
},