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

但通过这种方式，当客户端返回到较低的步骤时，组件会再次重新发送，另一种方式是watch而不是state来检查步骤并将加载的组件名称保存在数组中，并在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;
},
}