vuejs2 vee-validate 3 dynamic radio - vuejs2

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()
}
})
})
},