My goal is to make the next button clickable only when a checkbox is selected. I am attempting to validate whether the checkbox is checked or not, enabling the button for the next step only when it meets this condition. Once the user moves on to the next step, the button should be disabled again.
In my setup, I'm importing the Detailsform0.vue into ProductPage.vue using an array called items[]. Each form is contained in a separate file. Can anyone assist me with implementing the functionality to enable the button upon checkbox selection and disable it again after moving to the next step? Thank you in advance. https://i.sstatic.net/D2Sob.png
DetailsForm0.vue
This is a test.
I have filled out all the fields on this page.
\\\\\ ProductPage.vue
<template>
<component v-bind:is="currentStep.details"></component>
<button class="btn" v-on:click="backStep" id="back">Back</button>
<button class="btn" v-on:click="nextStep" v-bind:disabled="checked === false" id="next">Next</button>
</template> /// DetailsForm0 <template>
<component v-bind:is="currentStep.details"></component>
<button class="btn" v-on:click="backStep" id="back">Back</button>
<button class="btn" v-on:click="nextStep" v-bind:disabled="checked === false" id="next">Next</button></template>
data: function () {
return {
items: [
{ stepTitle: 'Step 1', details: DetailsForm0 },
{ stepTitle: 'Step 2', details: DetailsForm1 },
{ stepTitle: 'Step 3', details: DetailsForm2 },
{ stepTitle: 'Step 4', details: DetailsForm3 }
],
activeNumber: 0,
checked:false
}
},