Vue中为v-if控制的动态元素绑定事件监听器失败求助

Vue的响应式DOM更新是异步的——当你设置dataLoaded = true后，Vue并不会立即渲染出v-if控制的DOM元素，此时直接访问wrapper.value拿到的仍是空值，导致无法绑定事件监听器。

1. 用nextTick等待DOM渲染完成 #

在设置dataLoaded后，通过nextTick等待Vue完成DOM更新，再操作元素：

// Vue 3 组合式API示例
import { nextTick } from 'vue';

// 获取数据后执行逻辑
dataLoaded.value = true;
await nextTick(); // 等待DOM渲染完成

const wrapperEl = wrapper.value;
if (wrapperEl) {
  // 把事件处理函数存为变量，方便后续移除
  const wheelHandler = (evt) => {
    evt.preventDefault();
    wrapperEl.scrollLeft += evt.deltaY;
  };
  wrapperEl.addEventListener('wheel', wheelHandler);
  
  // 可以把handler存在组件变量里，比如用ref存储
  // const wheelHandlerRef = ref(null);
  // wheelHandlerRef.value = wheelHandler;
}

2. 监听dataLoaded的状态变化 #

通过watch监听dataLoaded，当它变为true时再执行DOM操作：

import { watch } from 'vue';

watch(dataLoaded, (isLoaded) => {
  if (isLoaded) {
    const wrapperEl = wrapper.value;
    if (wrapperEl) {
      const wheelHandler = (evt) => {
        evt.preventDefault();
        wrapperEl.scrollLeft += evt.deltaY;
      };
      wrapperEl.addEventListener('wheel', wheelHandler);
      // 保存handler以便后续移除
    }
  }
});

3. 移除事件的处理 #

因为需要在移动端移除事件，必须保留事件处理函数的引用，不能用匿名函数：

// 假设之前把handler存在了wheelHandlerRef里
const wrapperEl = wrapper.value;
if (wrapperEl && wheelHandlerRef.value) {
  wrapperEl.removeEventListener('wheel', wheelHandlerRef.value);
}

备选方案：模板内直接绑定事件 #

如果场景允许，也可以用Vue的模板事件绑定，让Vue自动管理事件的绑定/移除：

<div 
  class="section-wrapper" 
  ref="wrapper" 
  v-if="dataLoaded"
  @wheel="handleWheel"
> ... </div>

const enableWheel = ref(true); // 控制事件是否生效

const handleWheel = (evt) => {
  if (!enableWheel.value) return;
  evt.preventDefault();
  wrapper.value.scrollLeft += evt.deltaY;
};

// 移动端需要禁用时，只需设置：
// enableWheel.value = false;

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