How to make vuetify v-stepper header as completed in dynamically?

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.

61 thoughts on “How to make vuetify v-stepper header as completed in dynamically?”

Leave a Comment