Hok Yau.
2021-08-05 08:56
采纳率: 40%
浏览 83
已结题

vue 如何在点击vant框架dialog确认按钮时获取当前点击项的index索引

请求各位一下!让我早日完成迭代 问题如下:

 <!-- 座位列表 -->
      <div class="seatList" v-for="(item, index) in lcinfo" :key="index" v-show="num == index">
        <ul>
          <!-- 每个座位 -->
          <li v-for="(seatItem, indexSeat) in item.seatList" :key="indexSeat" >
            <div v-if="seatItem.theSeat == 1" @click="keyuyueFun(item,indexSeat,seatItem)">
              <img src="../assets/images/keyuyue.svg" alt="" />
            </div>
            <div v-else-if="seatItem.theSeat == 2" @click="suodingFun">
              <img src="../assets/images/suoding.svg" alt="" />
            </div>
            <div v-else-if="seatItem.theSeat == 3" @click="yiyuyueFun">
              <img src="../assets/images/yiyuyue.svg" alt="" />
            </div>
            <div v-else-if="seatItem.theSeat == 4" @click="yichangFun">
              <img src="../assets/images/yichang.svg" alt="" />
            </div>
            <div v-else>暂无</div>
            <strong ref="num">{{ "0" + seatItem.seatNumber }}</strong>
            <!-- 弹出框 -->
            <van-dialog
              v-model="popUpOneIs"
              title="预约座位"
              show-cancel-button
              @confirm="seatConfirmFun(indexSeat,seatItem)"
              @cancel = 'isHidden'
              
            >
              <p>{{ classroomItem }}{{showVal}}号座位</p>
              <p>预约时间段</p>
              <span @click="getTimeDate"
                ><input type="text" v-model="getTime" disabled />
                </span><span @click="isSelectorTimeFun"><input v-model="sixHours" type="text" disabled/></span>
            </van-dialog>
          </li>
        </ul>
      </div>


// 座位弹出框确认按钮方法
    seatConfirmFun(indexSeat,seatItem){
        console.log(indexSeat); 
      // seatItem.theSeat = 3;
      // console.log(seatItem.theSeat);
      // console.log(seatItem.seatNumber);
    },
    //可预约状态
    keyuyueFun(item,indexSeat,seatItem) {
      this.popUpOneIs = true;
      this.showVal = this.$refs.num[indexSeat].innerText//点击座位获取到strong标签的文本
      this.classroomItem = item.classroom
      console.log(indexSeat);
    },

我的需求是点击数组的 seatItem 项 并且打印出他所对应的索引 在seatConfirmFun方法里 不管点击哪一项 打印的总是数组的最后一项索引
但是在keyuyueFun 方法里是正常的 这是为啥 (两个方法里传入的都是相同的参数)

这个问题已经搞清楚了
因为我的dialog弹出框并不是在生成dom的时候渲染的,而是在点击的时候渲染的,这时候循环已经走完了,所以打印的只是数组的最后一项
但是我不知道咋解决呢, 总结一下就是各位解决一下标题的问题就行了!

  • 收藏

4条回答 默认 最新

  • gzczzzzzz 2021-08-05 09:16
    已采纳

    意思是几个循环出来的元素点击都是弹框,然后是弹框出来的时候想知道点击的是哪个元素? 是这样的场景吗?
    那这样的话在data定义个变量就行了呗 点击循环元素时候把索引信息存到data就行呗 , 弹框显示根据data里变量判断就行了呗

    1 打赏 评论
  • 点击时自己传个参数就行了

    1 打赏 评论
  • 孤月葬花魂 2021-08-05 09:12

    再创建变量存储就行了,点击seatitem项的时候获取到对应的信息(这个你应该已经实现了),把需要的信息存储在data的变量里,dialog弹出框里直接渲染这个变量里的内容就行

    1 打赏 评论
  • 嘿!小老头 2021-08-05 09:16
    <div v-if="seatItem.theSeat == 1" @click="keyuyueFun(item,indexSeat,seatItem,index)">
                  <img src="../assets/images/keyuyue.svg" alt="" />
                </div>
    
      seatConfirmFun(indexSeat,seatItem){
            console.log(this.setIndex); //你要的索引
          // seatItem.theSeat = 3;
          // console.log(seatItem.theSeat);
          // console.log(seatItem.seatNumber);
        },
    keyuyueFun(item,indexSeat,seatItem,index) {
         this.setIndex = index //你要的索引
          this.popUpOneIs = true;
          this.showVal = this.$refs.num[indexSeat].innerText//点击座位获取到strong标签的文本
          this.classroomItem = item.classroom
          console.log(indexSeat);
        },
    
    1 打赏 评论

相关推荐 更多相似问题