[Vuejs]-If input is CHECKED button ENABLE VUE JS

by

0👍

     [[[ DetailsForm0.vue]]] *** The check box is coming from DetailsForm0.Vue File  here what is in the file***
<template>
    <input type="checkbox" v-model="checked">I have filled all this page<br>
</template>
<script>
export default {
  name: 'DetailsForm',
  data: function () {
    return {
      checked: false
    }
  }
}
</script>
     [[[ ProductPage.vue]]] *** The DetailsForm0.Vue is getting imported here in ProductPage.vue File ***
    <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
        }
      },

    <script>
    methods: {
        toggleActive: function (index) {
          this.activeNumber = index
        },
        nextStep: function () {
          this.toggleActive(this.activeNumber + 1)
          this.checked = false
        }
        }

Leave a comment