Vuetify stepper Load a component based on the state

Question

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>

Mohsen Mohsen · Accepted Answer · 2020-11-08T08:17:57

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;
  },
}

Vuetify stepper Load a component based on the state

1 Answers