时间:2021-05-26
背景:后端返前端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不能触发点击事件的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Vue为v-html中标签添加CSS样式{{news.title}}{{news.datetime}}返回列表当我们使用v-html渲染页面,使用下面这种方式去
需求:需要在v-html的html字符串的button中绑定点击事件,需要点击后做一些操作,必须渲染成html,但是渲染后的html里面写绑定事件的代码没有经过
本文实例讲述了vue.js使用v-pre与v-html输出HTML操作。分享给大家供大家参考,具体如下:/vue/2.5.16/vue.min.js">{{这里
问题2.0filtersonlyworkinmustachetagsandv-bind.Vue2.0不再支持在v-html中使用过滤器,比如在1.0中是这样使用
1.问题描述在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式。代码如下,div.article-context里面的图片修改成自