开发中的自己封装的一个视频组件,但是详情页面中需要循环多个视频组件,如果不条件打开,你点击哪个组件窗口他都会打开此页面的所有窗口,所以需要条件打开。
(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, //添加的属性
});
},