Как сделать vuetify v-stepper header как завершенный динамически? - PullRequest
Новая
       26

Как сделать vuetify v-stepper header как завершенный динамически?

1 голос
/ 02 апреля 2020

В настоящее время я работаю над <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
      }
}

Пожалуйста, дайте мне знать, если вам нужна дополнительная проработка.

1 Ответ

0 голосов
/ 02 апреля 2020

Вопрос не ясен, пытаетесь ли вы изменить полную иконку или просто пытаетесь изменить цвет, чтобы показать шаг как завершенный.

В любом случае завершить - это опора, так что вы должен передать его как :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

...