Vuetify stepper 根据状态加载组件

【问题标题】：Vuetify stepper Load a component based on the stateVuetify stepper 根据状态加载组件
【发布时间】：2020-07-30 04:49:28
【问题描述】：

我正在使用 vuetify 步进器。有 4 个步骤，每个步骤都有自己的组件。每个组件都会在挂载时触发 axios 调用。我想要实现的是根据步进器的步骤安装一个组件。我将如何创建这个？

<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>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

简单的方法是在组件标签上加上v-if来检查state是否等于组件步骤

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

但是这样当客户端返回到较低的步骤时，组件再次重新渲染，另一种方法是watch over state 检查步骤并将加载的组件名称保存在数组中，并使用当前组件名称重新检查数组在 v-如果或保存最高状态客户端观看所以组件已经加载

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

【讨论】：