亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使 vuetify v-stepper 標頭動態完成?

如何使 vuetify v-stepper 標頭動態完成?

HUH函數 2022-06-09 16:25:17
目前,我正在研究<v-stepper>vuetify js,我已經創建了 12 個步驟。每一步都有一組任務內容,當你點擊每一個步驟時,相應的步驟內容將通過點擊改變。<v-stepper>如果一組任務已在該特定步驟上完成,我希望該步驟將顯示完成(或勾選圖標)。假設如果Step 1完成,那么step 1圖標應該顯示一個綠色的勾號圖標?,F在每個步驟都填充了內容,并且我有已完成的步驟數據,但無法顯示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      }}如果您需要更多詳細信息,請告訴我。
查看完整描述

2 回答

?
慕的地6264312

TA貢獻1817條經驗 獲得超6個贊

關于您是嘗試更改完整圖標,還是只是嘗試更改顏色以將步驟顯示為已完成,問題尚不清楚。


無論哪種方式,完成都是一個道具,所以你必須將它作為: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


查看完整回答
反對 回復 2022-06-09
?
弒天下

TA貢獻1818條經驗 獲得超8個贊

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>

http://img1.sycdn.imooc.com//62a1ae900001cd7c08170070.jpg

查看完整回答
反對 回復 2022-06-09
  • 2 回答
  • 0 關注
  • 271 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號