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

但是这样，当客户端返回到较低的步骤时，组件再次重新呈现，另一种方法是watch超过state来检查步骤并将加载的组件名称保存在数组中，并使用当前组件名称重新检查数组在v-if中保存观看状态最高的State客户，因此componenet已经加载

<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根据状态加载组件

1 个答案: