我有一个组件,其包含如下设置的dis:

<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;
});

无法添加事件监听器,因为它似乎找不到该元素.当我判断我的控制台日志(log)时,我看到以下内容:

enter image description here

所以我似乎能够记录ref,但无法检索值,从而检索元素.我有点困惑Vue如何处理这个问题,以及我需要做什么来访问元素和绑定监听器.

有人能帮忙吗?

编辑:我需要以编程方式完成此操作的原因是我还需要删除移动设备上的处理程序

谢谢

推荐答案

VUE SFC PLAYGROUND

直接绑定事件:

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

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

const wrapper = ref();

永远不要尊重像wrapper = wrapper.value这样的多姆引用,因为Vue可以重新渲染组件并且引用无效.

Vue.js相关问答推荐

使用插槽的VUE 3工作台

在移动版本中使用标准的 v-data-table

如果在 VueJS/VuetifyJS 中切换switch,则调用函数

在 bootstrap-vue 中渲染自定义样式

在组件之间共享 websocket 连接

如何对将 DOM 元素附加到 HTML 正文的 Vue 组件进行单元测试?

如何对对象数组进行 v-model

使用带有 v-date-picker 的 new Date() 不起作用

避免在运行时向 Vue 实例或其根 $data 添加响应式属性

导入没有 .vue 扩展名的 *.vue 文件时出现以下错误?

如何将 v-if 与 Vue.js 中的值进行比较

如何在 Vue3 设置标签中定义组件名称?

克隆元素并附加到 DOM 的正确方法

如何在 VueJS 中下载本地存储的文件

在 VueJS 中使用 Axios - 这个未定义

vuex - 即使不推荐,是否可以直接更改状态?

TypeError: Object(...) 不是 Vue 中的函数

单击 v-select 项目时如何获取对象而不是单个值?

Vue-i18n - 无法读取未定义的属性配置

隐藏特定标题及其在 vuetify 数据表中的对应列