v-for中點擊當前項結合$set觸發當前項子項的顯示與否(路由傳參)

<div class="assignCont" v-for="(finish,index) in finisheData" :key="index">
    <div class="assignmentList">
      <!--這裏路由帶兩個參數過去,taskId用於識別列表對應的詳情頁,Active用於詳情頁返回列表頁時顯示對應項-->
      <router-link :to="{name:'XXX',query:{taskId:finish.task_id,Active:active}}">
        <label>
            <h3>{{finish.title}}</h3>
            <span>{{finish.created_at}}</span>
        </label>
        <p v-html="finish.content"></p>
      </router-link>
        <div class="rewardShow">
            <em>
              <!--獎勵-->
                <i>{{$t('qc.Reward')}}: {{finish.reward}}</i>
              <!--剩餘條數-->
                <font>{{$t('qc.Remaining_number')}}: {{finish.last_num}}</font>
            </em>
          
          <span v-if="finish.state===0"><em><i class="status draw Gray">{{$t('qc.Received')}}</i></em><font>{{$t('qc.Task_status')}}:{{$t('qc.processing')}}</font></span>
          
          <span v-if="finish.state===1"><em><i class="status draw Gray">{{$t('qc.Received')}}</i></em><font>{{$t('qc.Task_status')}}:{{$t('qc.under_review')}}</font></span>
         
          <span v-if="finish.state===2"><em><i class="status draw Gray">{{$t('qc.Have_done')}}</i></em><font>{{$t('qc.Task_status')}}:{{$t('qc.Have_done')}}</font></span>
         
          <span v-if="finish.state===3"><em><i class="status draw Gray">{{$t('qc.Received')}}</i></em><font>{{$t('qc.Task_status')}}:{{$t('qc.Was_rejected')}}</font></span>
        </div>
    </div>
    <div class="downShow" @click="setListBol(index)"   :class="listBol[index]?'curr':''">
      <!--查看詳情-->
      <span>{{$t('qc.see_details')}}</span>
        <i><img src="../../../static/images/right.png"></i>
    </div>
    <div class="moreAll" v-if="listBol[index]">
        <router-link to="">
          <!--DD.發黑化肥揮發發黑 發v護國寶防護額發黑化肥揮發發黑 發v護國寶防護額臺→審覈通過後發發黑化肥揮發發黑 發v護國寶防護額。-->
          <p>{{$t('qc.A_ASK')}}</p>
          <!--MM.發黑化肥揮發發黑 發v護國寶防護額發黑化肥揮發發黑 發v護國寶防護額。-->
          <p>{{$t('qc.B_ASK')}}</p>
          <!--CC.發黑化肥揮發發黑 發v護國寶防護額;-->
          <p>{{$t('qc.C_ASK')}}</p>
        </router-link>
    </div>
</div>

 

data(){
  listBol:[true]
},
methods:{
  setListBol(index){
    this.$set(this.listBol,index,!this.listBol[index]);
  },

}

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章