时间戳

首页 > 解决方案 > Vuetify stepper 根据状态加载组件

vue.js - Vuetify stepper 根据状态加载组件

问题描述

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

解决方案

简单的方法是将 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;
  },
}

推荐阅读