为什么我的 Vuetify 中的步进器组件不显示？答案

【问题标题】：Why my Stepper Component in Vuetify display none?为什么我的 Vuetify 中的步进器组件不显示？
【发布时间】：2020-06-28 07:48:17
【问题描述】：

我正在使用 Vue 和 Axios 使用 Vuetify 的 Stepper 组件来显示数据。所以在添加 API 数据后，CSS 类设置为display: none;。我不知道为什么，请帮助我。

这是我显示数据的代码。如果你想要什么，请告诉我

 <v-stepper v-model="questionTab">
                            <v-stepper-items>
                                    <text-component
                                        v-for="item in question_data" :key="item.questionTab"
                                        :stepData="1"
                                        :questionid="item.questions.question_title"
                                        :questiondescription="item.questions.question_desc"
                                    ></text-component>
                            </v-stepper-items>
                        </v-stepper>

【问题讨论】：

能否请您展示您的文本组件？

标签： vue.js vuetify.js

【解决方案1】：

您应该将 text-component 包装在 v-stepper-content 组件中。

https://vuetifyjs.com/en/components/steppers/

<template>
  <v-stepper v-model="questionTab">
        <v-stepper-header>
            <v-stepper-step
            v-for="(item, idx) in question_data"
            :key="idx"
            :complete="model > idx+1"
            >
                Name of Step {{ idx + 1 }}
            </v-stepper-step>
        </v-stepper-header>

        <v-stepper-items>
            <v-stepper-content 
            v-for="(item, idx) in question_data" 
            :key="item.questionTab"
            :step="idx+1">
                <text-component
                    :stepData="1"
                    :questionid="item.questions.question_title"
                    :questiondescription="item.questions.question_desc"
                ></text-component>
            </v-stepper-content>
        </v-stepper-items>
    </v-stepper>
</template>

【讨论】：

【解决方案2】：

我遇到了类似的问题，但不是立即跳到新添加的步骤，而是使用$nextTick解决了它

addStep() {
  const index = this.currentStep;
  this.steps.splice(index, 0, {
    name: '',
    image: '',
    command: '',
    args: '',
  });
  this.$nextTick(() => {
    this.currentStep += 1;
  });
},

【讨论】：