VUE解决v-html不能触发点击事件的问题_v-html绑定方法 - CSDN文库

5星 · 超过95%的资源 128 浏览量更新于2023-05-04 评论收藏 35KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

VUE解决解决 v-html不能触发点击事件的问题不能触发点击事件的问题

背景：背景：后端返前端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>

页面：页面：

控制台：控制台：

以上这篇VUE解决 v-html不能触发点击事件的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家

多多支持软件开发网。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论10

FelaniaLiu

2023-06-17

这篇文章摆脱了许多废话，将重点放在了解决问题的解决方案上。

weixin_38632046

粉丝: 10
资源: 933

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈