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]);
  },

}

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值