VUE v-html不能触发点击事件的解决方案

news/2024/7/10 0:31:20 标签: vue

背景:后端返前端html格式的数据,前端用v-html解析渲染,如:<a @click="show(1)"></a>,a标签能成功渲染,但其绑定的事件无法触发。

原因:vue没有将其作为vue的模板解析渲染

解决方案:不用v-html而是component模板编译

上干货:

<template>
    <div class="hello">
        <h1>
            我是父组件
        </h1>
        <div class="parent" id="parent">
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    var MyComponent = Vue.extend({
        template: '<a @click="show(1)">我是大魔王</a>',
          methods: {     
            show(i) {
                console.log(i);
            },
        }
    });
    var component = new MyComponent().$mount();
    export default {
        data() {
            return {
            }
        },
        methods: {
        },
        mounted() {
            document.getElementById('parent').appendChild(component.$el);
        }
    }
</script>

<style scoped>
</style>

页面:
这里写图片描述
控制台:
这里写图片描述

如有帮助 欢迎点赞~


http://www.niftyadmin.cn/n/914163.html

相关文章

GARFIELD@10-05-2004

am i blind?转载于:https://www.cnblogs.com/rexhost/archive/2004/10/05/49081.html

2017-09-18

权限访问修饰符&#xff1a; Public :可以被任意类访问&#xff1b; Protected&#xff1a;同包类访问&#xff0c;如果不是同包类&#xff0c;必须是该类的子类可以访问&#xff1b;修饰属性&#xff0c;方法&#xff1b; (default)&#xff1a;只能被同包的类访问&#xff1b…

Fedora30 安装 WPS Office 2019 For Linux

1. 下载地址 https://linux.wps.cn/# 2. 得到安装文件&#xff1a;wps-office-11.1.0.8865-1.x86_64.rpm 3. 执行安装指令&#xff1a; sudo dnf install wps-office-11.1.0.8865-1.x86_64.rpm 4。 在所有应用中可以看到wps已经安装成功

mpvue input触摸点击@focus(即小程序bindfocus)触发3次的解决方案

需求&#xff1a;触摸input时&#xff0c;跳转页面。 替代方案&#xff1a;增加一个透明的div覆盖在input上&#xff0c;绑定click事件&#xff0c;来替代focus方法&#xff08;根据需求控制div的显隐&#xff09;

面朝大海 春暖花开

从明天起, 做一个幸福的人 喂马, 劈柴, 周游世界 从明天起, 关心粮食和蔬菜 我有一所房子, 面朝大海, 春暖花开 从明天起, 和每一个亲人通信 告诉他们我的幸福 那幸福的闪电告诉我的 我将告诉每一个人 给每一条河每一座山取一个温暖的名字 陌生人, 我也为你祝福 愿你有一个灿烂…

视图序列索引

视图名字一般是以“V_”开头 视图在SQL语句中体现的角色与表相同&#xff0c;但是视图并不是一张真实存在的表&#xff0c;而只是对应一个 select语句的查询结果集&#xff0c;并将其当做表看待而已&#xff0c;使用视图的目的就是简化sql语句的复杂度&#xff0c;重用子查询&a…

解决 npm install Error: EACCES: permission denied, mkdir node_modules/gifsicle/

1. 原因CentOS jenkins自动构建服务 使用root账号执行npn install 指令&#xff0c;报错如下 > gifsicle4.0.1 postinstall /***//node_modules/gifsicle > node lib/install.js⚠ EACCES: permission denied, open /***//node_modules/gifsicle/vendor/gifsicle⚠ gifs…

真是想不到系列之一:VB到底为我们做了什么? ----引自AdamBear的专栏

真是想不到系列》每次看大师的东西到了精彩之处&#xff0c;我就会拍案叫绝&#xff1a;"哇噻&#xff0c;真是想不到&#xff01;"。在经过很多次这种感慨之后&#xff0c;我发现只要我们动了脑筋&#xff0c;我们自己也能有让别人想不到的东西。于是想到要把这些想…