Vue v-html不能触发点击事件

「爱情、让人受尽委屈。」 2021-08-28 17:11 856阅读 0赞

## 现象：后端返回到前端的是html格式的数据，前端用`v-html`解析渲染，例如:`<span @click='add()'>点击</span>`,span标签成功渲染，但是绑定的事件无法触发 ##

原因：vue没有将其作为vue的模板解析渲染 解决方法：不用`v-html`而是`component`模板编译

<template>
        <div>
            父组件
            <div class='parent' id='parent'></div>
        </div>
    </template>
    <script>
        import Vue from 'vue'
        var MyComponent = Vue.extend({
            template: '<span @click='add()'>点击</span>',
              methods: {     
                add() {
                    console.log('触发点击事件');
                },
            }
        })
        let component=new MyComponent().$mount()
        export default {
            data() {
                return {
                }
            },
            methods: {
            },
            mounted() {
                document.getElementById('parent').appendChild(component.$el);
            }
        }
    </script>

用到的API

*  `Vue.extend(options)` 基础`Vue`构造器，创建一个“子类”
 *  `vm.$mount()` 可以使用 `vm.$mount()` 手动地挂载一个未挂载的实例

发表评论取消回复

表情：

评论列表（有 0 条评论，856人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECharts 触发click点击事件

1 实现代码 <body>  <div id="main" st

我不是女神ヾ/ 2023年10月05日 11:41/ 0 赞/ 17 阅读

相关 jquery点击事件(jquery触发点击事件onclick)

jquery实现远程http的get请求用哪个事件？jquery ![jquery点击事件][jquery] jquery实现远程http的get请求用哪个事件？jq

系统管理员/ 2023年09月26日 15:01/ 0 赞/ 178 阅读

相关 vue 自动触发点击事件

需要，点击左边的菜单，顶部菜单相应改变，但是都需要点击事件，页面进来时，默认触发点击事件方法一，vue自定义指令 directives:{

Dear 丶/ 2023年01月12日 14:56/ 0 赞/ 247 阅读

相关 Vue实现自动触发点击事件

directives:{ trigger:{ inserted(el, binging){ console.l

灰太狼/ 2023年01月01日 01:53/ 0 赞/ 329 阅读

相关 vue使用echarts 点击事件点击一次触发多次

问题描述现项目中需求是切换公司就要更新地图，就需要重新渲染这个echarts图，一旦重新渲染后会出现累加情况，它会根据你渲染的次数调用点击事件，即点击一次触发多次

偏执的太偏执、/ 2022年12月16日 13:25/ 0 赞/ 273 阅读

相关 ionic轮播点击事件不触发

![70][] 问题描述：轮播时，往往第一项不会触发点击事件，滑动后能执行，但是最后一项又不能执行注意事项：我的点击事件绑定在ion-slide和img上都有这个问题

古城微笑少年丶/ 2022年05月09日 12:52/ 0 赞/ 254 阅读

相关阻止上层div触发点击事件，并触发下层div的点击事件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

拼搏现实的明天。/ 2021年09月23日 13:48/ 0 赞/ 932 阅读

相关 Vue v-html不能触发点击事件

现象：后端返回到前端的是html格式的数据，前端用`v-html`解析渲染，例如:`<span @click='add()'>点击</span>`,span标签成功渲染

「爱情、让人受尽委屈。」/ 2021年08月28日 17:11/ 0 赞/ 857 阅读

相关 vue模拟触发另一个按钮点击事件

vue.js 1，给另一个按钮添加ref <el-button size="small" type="primary" ref="import">导入</el-

我会带着你远行/ 2021年07月26日 15:35/ 1 赞/ 2232 阅读

相关 JQuery实现(阻止事件冒泡,不触发父级标签点击事件)点击div里面的a的能触发点击事件，但是不触发外面的div的点击事件

现在有一个div，这个div里面有一个a标签，div和a都是有点击事件的，但是我想要做到点击a标签的时候就只触发里面a标签的点击事件，不想执行外层div的点击事件。![2016

心已赠人/ 2021年06月10日 20:41/ 0 赞/ 688 阅读