我在我的MapBox map 上添加了自定义按钮,它们可以正确地购物.然而

代码如下所示:

const currentLocationControl = new CustomControl('current-location-control', 'GPS');

this.map.addControl(currentLocationControl, 'top-left');

document.getElementById('test').addEventListener('click', function (e) {
    alert('test');
});

我在vue.jsmounted方法中执行这段代码.

CustomControl:

export default class CustomControl {

    constructor(className, text) {
        this.className = className;
        this.text = text;
    }

    onAdd(map){
        this.map = map;
        this.container = document.createElement('div');
        this.container.id = 'test';
        this.container.className = this.className;
        this.container.textContent = this.text;
        return this.container;
    }
    onRemove(){
        this.container.parentNode.removeChild(this.container);
        this.map = undefined;
    }
}

当我console.log(document.getElementById('test'));时,我在控制台(test div)中看到了预期的结果.

enter image description here

那么这里会发生什么?

推荐答案

很可能这个元素还不存在,这取决于map.addControl的工作方式.

也许如果你在CustomControl中创建了一个方法来返回容器,而不是使用document.getElementById,你会使用类似currentLocationControl.getContainer()的东西?

或者在你的CustomControl中 Select setAction

setAction(action) {
    this.container.addEventListener('click', action);
}

Vue.js相关问答推荐

为什么我的数组在 onBeforeMount 函数中不为空,但在 onMounted 函数中为空

如何默认打开一个v-list-group?

使用内部方法创建计算(computed)属性是否合法?

Vue 3 / Vuetify 3:如何为按钮设置全局默认 colored颜色

如何 for each 动态创建的按钮/文本字段设置唯一变量?

使用 vue / nuxt js 切换 fontawesome 图标

Vue 脚本标签中更漂亮的 destruct 功能

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

vue.js 在 App.vue 中获取路由名称

如何在 vue 组件之外访问$apollo?

如何将 vuejs 项目部署到 heroku

如何在map中添加新的标记 onclick?

是否可以在没有 Vue 的情况下使用 Vuex?

一个 div 组件中的 Vue.js 2.0 路由链接

如何在 Vue.js 中使用 MaterializeCss?

在 .vue 文件中使用 Vue.set() 和 Vue.use()

重新加载页面正在 vue 组件中的插槽上闪烁内容

Vue CLI 3 sass-resources-loader - Options.loaders 未定义

Vue 3 组合 API 数据()函数

vuejs 复制数据对象和删除属性也会从原始对象中删除属性