vue3 v-html 绑定的元素怎么添加点击事件？

Question

比如我有一个按钮的字符串

const btn = `<button>点我</button>``

然后我用v-html渲染到vue页面上，请问怎么给这个button绑定点击事件？

Answer 1

可以使用事件代理,伪代码如下:

template:

<div class="xxx" v-html="xxx" @click="onClickHandler"></div>

js

const onClickHandler = (e) => {
    //可以通过class类名来判断，也可以通过tagName来判断
    const classList = e.target.classList;
    //v-html里假如有一个渲染类名为test的元素button
    if(classList.contains("test")){
        //点击事件执行的逻辑
    }
    //或者使用tagName来判断,但是这里要确定tagName是否唯一，所以个人感觉还是使用classList判断
    // const tagName = e.target.tagName.toLowerCase()
    // if(tagName === "button"){ //点击事件执行的逻辑 }
}

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

用原生的 DOM 方法添加，onclick="xxx" 或者 addEventListener

不过为什么要给 v-html 出来的东西添加事件……？

Answer 3

在 v-html 绑定的数据加载完成且渲染完成后(nextTick)然后用 addEventListener 绑定数据试试。但是这么绑定得在组件销毁之前解绑。