Vue中v-if控制视频播放器显示失效问题求助

你的视频播放器隐藏逻辑失效主要有两个核心问题：

1. 视频容器未绑定条件渲染指令 #

模板中<div class="videoPreview relative">是视频播放器的外层容器，你只给内部的关闭按钮和videoWrap加了v-if="handleVideo.hasVideo"，但这个容器本身没有绑定条件，导致即使hasVideo为false，容器和里面的<video>元素依然会被渲染，所以播放器一直显示。

修复：
给视频容器添加v-if绑定：

<div class="videoPreview relative" v-if="handleVideo.hasVideo">
  <video :ref="handleVideo.videoPreview" height="200" controls></video>
  <img
    class="picClose absolute"
    src="../assets/img/close.png"
    @click="handleVideo.removeVideo"
  />
</div>

（注：此时关闭按钮的v-if可以去掉，因为容器已经被条件渲染控制）

2. removeVideo方法中的DOM操作错误 #

在useVideoHandling组合式函数的removeVideo方法里，你错误地对DOM元素使用了.value：

const removeVideo = () => {
  const video = videoPreview.value;
  video.value.src = ""; // 错误：video已经是DOM元素，不需要.value
  hasVideo.value = false;
};

videoPreview.value获取到的是<video>DOM元素本身，直接访问video.src即可，.value是Vue ref变量的访问方式，这里会导致video.value为undefined，进而报错，可能影响hasVideo的响应式更新。

修复：
修改removeVideo方法：

const removeVideo = () => {
  const video = videoPreview.value;
  if (video) { // 增加判断避免空指针报错
    video.src = "";
  }
  hasVideo.value = false;
};

3. 冗余参数修正（可选） #

组件中调用useVideoHandling(fields)，但组合式函数定义并没有接收这个参数，虽然不影响当前功能，但建议保持一致：
要么去掉调用时的参数：

const handleVideo = useVideoHandling();

要么在函数定义中接收（如果后续需要用到fields）：

export const useVideoHandling = (fields) => {
  // ... 函数原有内容
};

完成以上修改后，视频播放器就会在hasVideo为false时正确隐藏，上传后正常显示。

内容的提问来源于stack exchange，提问作者crawlingdev