如何使 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>

    <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

Answer 2

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