vue.js - vue directive失效的问题

问题描述

问 题

这是html：

<div v-html="dialog_format_html(scope.row.html)" >

dialog_format_html函数的代码：

dialog_format_html: function (value) {
    if (!value) return ''
    if(this.dialog.type == 'url' || this.dialog.type == 'area'){
        return `<a v-link target="_blank" href="${value}">${value}</a>`
    }else{
        return value;
    }
},

v-link就是我定义的指令。如果一段a标签，正常情况下是可以触发指令的。所以指令是正常运行的。
现在的问题就是通过v-html构造的东西，v-link失效了。如何解决这个问题呢？

解决方案

v-html会把内容按普通HTML插入，不会作为Vue模板进行编译的，可以做成组件来代替

这篇关于vue.js - vue directive失效的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！