CloneValidation.vue

<template>
<v-layout column>
  <v-layout row>
    <v-flex shrink>
      <h1>Test KdStepper</h1>
    </v-flex>
  </v-layout>
  <v-layout row>
    <v-flex>
      <!-- IMPLEMENTASI KdStepper disini -->
      <kd-stepper
        :steps="steps"
        v-model="stepPosition"
        non-linear
      >
      </kd-stepper>
      <v-card class="text-right">
        <v-btn
          depressed
          color="secondary"
          :disabled="stepPosition < 2"
          @click="prev()"
        >
          Prev
        </v-btn>
        <v-btn
          depressed
          color="primary"
          class="white--text"
          :disabled="stepPosition >= (this.steps.length - 1)"
          @click="next()"
        >
          Next
        </v-btn>
      </v-card>
    </v-flex>
  </v-layout>
</v-layout>

</template>

<script>
import KdStepper from '@/components/DataboardComponents/KdStepper.vue'
import TestFile from './TestFile.vue'

export default {
  components: {
    KdStepper
  },
  data () {
    return {
      steps: [
        {
          label: 'Product Information',
          content: TestFile,
          editable: true,
          params: {
            message: 'Test 1 Content',
            value: '1'
          },
          listener: {
            input: (v) => { console.log(v) }
          }
        },
        {
          label: 'Weight information',
          content: TestFile,
          params: {
            message: 'Test 2 Content',
            value: '2'
          },
          listener: {
            input: (v) => { console.log(v) }
          }
        },
        {
          label: 'Warehouse',
          content: TestFile,
          editable: true,
          params: {
            message: 'Test 3 Content',
            value: '3'
          },
          listener: {
            input: (v) => { console.log(v) }
          }
        },
        {
          label: 'Test 4',
          content: TestFile,
          editable: true,
          params: {
            message: 'Test 4 Content',
            value: '4'
          },
          listener: {
            input: (v) => { console.log(v) }
          }
        },
        {
          label: 'Test 5',
          content: TestFile,
          params: {
            message: 'Test 5 Content (must hidden)',
            value: '5'
          },
          listener: {
            input: (v) => { console.log(v) }
          }
        }
      ],
      stepPosition: 1
    }
  },
  methods: {
    next () {
      if (this.stepPosition > (this.steps.length - 1)) {
        return
      }
      this.stepPosition++
    },
    prev () {
      if (this.stepPosition < 1) {
        return
      }
      this.stepPosition--
    }
  }
}
</script>

<style scoped>

</style>