如何使 vuetify v-stepper 标头动态完成？

Question

目前，我正在研究<v-stepper>vuetify js，我已经创建了 12 个步骤。每一步都有一组任务内容，当你点击每一个步骤时，相应的步骤内容将通过点击改变。<v-stepper>如果一组任务已在该特定步骤上完成，我希望该步骤将显示完成（或勾选图标）。假设如果Step 1完成，那么step 1图标应该显示一个绿色的勾号图标。现在每个步骤都填充了内容，并且我有已完成的步骤数据，但无法显示complete-icon该步骤是否已完成。

下面是我的代码：

<v-stepper-header>

          <template v-for="n in steps">

            <v-stepper-step :key="`${n}-step`" complete="completed" :step="n" :editable="editable" >

                     Week {{ n }}

            </v-stepper-step>

            <v-divider v-if="n !== steps" :key="n"></v-divider>

          </template>

</v-stepper-header>

完成方法：

e1(e1){

      this.SET_STATUS_TO_DEFAULT(false)

      // alert here

      console.log(e1)

      if(this.completedWeeksList.includes(e1)){

        this.completed = true

        this.editable = false

      }else{

        this.completed = false

        this.editable = true

      }

}

如果您需要更多详细信息，请告诉我。

Answer 1

关于您是尝试更改完整图标，还是只是尝试更改颜色以将步骤显示为已完成，问题尚不清楚。无论哪种方式，完成都是一个道具，所以你必须将它作为:complete......<v-stepper-header>&nbsp; &nbsp; <template v-for="n in steps">&nbsp; &nbsp; &nbsp; &nbsp; <v-stepper-step :key="`${n}-step`" :complete="completed" :step="n" :editable="editable" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Week {{ n }}&nbsp; &nbsp; &nbsp; &nbsp; </v-stepper-step>&nbsp; &nbsp; &nbsp; &nbsp; <v-divider v-if="n !== steps" :key="n"></v-divider>&nbsp; &nbsp; </template></v-stepper-header>演示：https ://codeply.com/p/kNjSEzu15W

Answer 2

in vutify的问题<v-stepper>在于，<v-divider>必须是同级而不是每个单独步骤的子级，因此在这种情况下，您需要使用该元素通过为每次迭代打印2 个或更多同级<template>来循环遍历项目列表，并且这里要注意的最重要的一点是，当您将其用于任何指令时，所有作为兄弟姐妹的孩子必须具有相同的绑定属性但值不同<template>:keyv-for&nbsp; &nbsp; <v-stepper v-if="studyReportsList.length > 1">&nbsp; &nbsp; &nbsp; <v-stepper-header>&nbsp; &nbsp; &nbsp; &nbsp; <template v-for="(item, key) in studyReportsList">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- all siblings must have the same :key or v-bind:key-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-stepper-step :key="key+1" :step="key+1" editable>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ item.name }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </v-stepper-step>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-divider v-if="key !== studyReportsList.length - 1" :key="key"></v-divider>&nbsp; &nbsp; &nbsp; &nbsp; </template>&nbsp; &nbsp; &nbsp; </v-stepper-header>&nbsp; &nbsp; </v-stepper>