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

【问题标题】：How to make vuetify v-stepper header as completed in dynamically?如何使 vuetify v-stepper 标头动态完成？
【发布时间】：2020-07-14 00:15:05
【问题描述】：

目前，我正在处理 vuetify js 上的 <v-stepper>，我已经创建了 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
      }
}

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

【问题讨论】：

标签： javascript vue.js vuejs2 vuex vuetify.js

【解决方案1】：

不清楚您是尝试更改完整图标，还是只是尝试更改颜色以显示步骤已完成。

无论哪种方式完成都是一个道具，所以你必须将它作为:complete...

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

演示：https://codeply.com/p/kNjSEzu15W

【讨论】：

【解决方案2】：

vutify 中 <v-stepper> 的问题在于，<v-divider> 必须是同级而不是每个单独步骤的子级，因此在这种情况下，您需要使用 <template> 元素通过为每次迭代打印 2 个兄弟姐妹 或更多来循环遍历项目列表，这里最需要注意的是 <template> 的所有兄弟姐妹必须具有相同的 :key 绑定属性，但当您将其用于任何 v-for 指令

时，其值不同

    <v-stepper v-if="studyReportsList.length > 1">
      <v-stepper-header>
        <template v-for="(item, key) in studyReportsList">
          <!-- all siblings must have the same :key or v-bind:key-->
          <v-stepper-step :key="key+1" :step="key+1" editable>
            {{ item.name }}
          </v-stepper-step>
          <v-divider v-if="key !== studyReportsList.length - 1" :key="key"></v-divider>
        </template>
      </v-stepper-header>
    </v-stepper>

【讨论】：