Vue v-html 点击事件无效
发布于 4 年前 作者 ab8512 7323 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

需求:后台给的一部分数据需要绑定事件,然后根据需要绑定查看详情事件。 原因: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>

回到顶部