将事件监听器绑定到动态元素

Question

我有一个包含 div 的组件，设置如下：

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

组件数据加载后，我想绑定一个事件处理程序，但我很难做到这一点。

我调用一个获取数据的方法，然后将 dataLoaded 设置为 true 并具有以下内容：

dataLoaded = true;
const wrapper = wrapper.value;

console.log('wrapper', wrapper);
console.log('wrapper value', wrapper.value);    

wrapper.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    wrapper.scrollLeft += evt.deltaY;
});

无法添加事件监听器，因为它似乎找不到该元素。当我检查控制台日志时，我看到以下内容：

所以看来我能够记录引用，但无法检索值，因此无法检索元素。我对 Vue 如何处理这个问题以及我需要做什么来访问该元素并绑定侦听器有点困惑。

有人可以帮忙吗？

谢谢

Answer 1

VUE SFC 游乐场

直接绑定事件：

<div class="section-wrapper" ref="wrapper" v-if="dataLoaded" @wheel.prevent="e => wrapper.scrollLeft += e.deltaY"> ... </div>

您还应该将您的包装器声明为 ref:

const wrapper = ref();

永远不要像

wrapper = wrapper.value

那样遵守 DOM 引用，因为 Vue 可以重新渲染组件并且引用会变得无效。