条件打开循环出的子组件

本文介绍如何在详情页中使用自定义视频组件,通过循环遍历并为每个组件设置条件打开功能,解决点击事件触发所有窗口的问题。作者分享了如何利用 Vue.js 的 $set 方法来动态改变组件状态,以便按需显示视频。
摘要由CSDN通过智能技术生成

 开发中的自己封装的一个视频组件,但是详情页面中需要循环多个视频组件,如果不条件打开,你点击哪个组件窗口他都会打开此页面的所有窗口,所以需要条件打开。

(1)给点击事件循环传递它的下标值index。

     //html
    <div
        class="item-box"
        v-for="(robotLists, index) in robotList"
        :key="index"
      >
       
        <div class="video-box">
          <span>上传视频:</span>
          <div class="video-pre">
            <div class="hover-text" @click="openVideo(index)"></div>
            <previewVideo
              :imodel="robotLists.videostatus"
              @closevideo="closevideo(index)" //子组件关闭函数
              :video="robotLists.video"
            ></previewVideo>
          </div>
        </div>

      </div>

(2)事件接收处用set去添加属性,实现条件打开。注:不用set添加属性,直接去用index,无法实现效果

 openVideo(index) {
      this.$set(this.robotList, index, {
        ...this.robotList[index],
        videostatus: true, //添加的属性
      });
    },

(3)事件接收处用set去添加属性,实现条件关闭。注:不用set添加属性,直接去用index,无法实现效果

closevideo(index) {
      this.$set(this.robotList, index, {
        ...this.robotList[index],
        videostatus: false, //添加的属性
      });
    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值