Vuetify根据状态加载组件

Question

我正在使用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>

Answer 1

简单的方法是将v-if放在元件标签上，以检查state是否等于元件步骤

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

但是通过这种方式，当客户端返回到较低的步骤时，组件再次重新呈现，另一种方法是通过state的watch来检查步骤并将加载的组件名称保存在数组中，并在v-if中重新检查具有当前组件名称的数组，或者保存最高状态客户端监视的组件，以便组件网络已经加载

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