CODEWITHSUNDEEP
vue.jsvuetify.js
bisamov
bisamov

Reputation: 740

Vuetify stepper Load a component based on the state

I am using vuetify stepper. There 4 steps and each step has it's own component. Each component fires an axios call on mounted. What I am trying to achieve is mount a component based on the step of the stepper. How would i create this? 

<template>

    <v-stepper v-model="state"
               vertical
               non-linear>

        <v-stepper-step editable :complete="state > 1"
                        step="1">
            General
        </v-stepper-step>

        <v-stepper-content step="1">
            <generalBooks :url="url"
                          />
            <v-btn color="primary" @click="state = 2">Continue</v-btn>
            <v-btn text>Cancel</v-btn>
        </v-stepper-content>

....

<template>

<script>
  export default{
    data: () => ({ state: 1 })
}
</script>

Upvotes: 0

Views: 1712

Answers (1)

Mohsen
Mohsen

Reputation: 4235

The simple way is put v-if on the component tag to check state is equal components step

<v-stepper-content step="1">
  <generalBooks v-if="state >= 1" :url="url" />

But this way when client back to the lower steps the component rerender again, another way is watch over state to check step and save loaded components name in an array and recheck array with current component name in in v-if or save highest State client watched so componenet already loaded

<v-stepper-content step="1">
  <generalBooks v-if="highestState >= 1" :url="url" />

data(){
  state: 1,
  highestState: 1,
},
watch: {
  state(val){
    if(val > this.highestState) this.highestState = val;
  },
}

Upvotes: 1

Related Questions