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

Question

Currently, I am working on <v-stepper> on vuetify js, and there are 12 steps that I've created. Every step there are set of tasks of contents available when you will click on each step, and accordingly step the contents will be changed by on click. I wanted the <v-stepper> step will show complete(or tick icon) if the set of tasks has completed on that particular step. Let's say if Step 1 is completed then step 1 icon should show a green tick icon. Now contents are populated on each step and I have the completed steps data but couldn't able to show complete-icon if the step is completed.

Below is my code:

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

completed method:

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

Please let me know if you need more elaboration.

Answer 1

The question isn't clear on wether you're trying to change the complete icon, or just trying to change the color to show the step as completed.

Either way complete is a prop, so you must pass it in as :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>

Demo: https://codeply.com/p/kNjSEzu15W

Answer 2

the problem with the <v-stepper> in vutify is that, the <v-divider> must be a sibling not a child of each individual step, so in this case you need to use the <template> element to loop through the list of items by printing 2 siblings or more for each iteration and the most important thing to note here is all children of <template> which are siblings must have the same :key binding attribute but not the same value when you use it for any v-for directive

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