vue v-html事件失效？自定义指令有何不可

img标签中可以使用 @error 事件去处理图片地址，显示一些默认图片或者做一些其他的事情

<img src="https://p.ssl.qhimg.com/t0199397a4f9c5e1b3b3.jpg" @error="(e)=>{ e.srcElement.src='https://p.ssl.qhimg.com/t0199397a4f9c5e1b3b.jpg'}">

vue 使用 v-html 来解析 img标签 @error 失效不起作用 ╮(╯﹏╰）╭
v-html 底层是 innerHTML 而 innerHTML 以文本形式插入,不识别事件的

<template>
    <div class="demo">
        <div v-html="html"></div>
    </div>
</template>
 export default {
  data() {
            return {
                html: '<img src=\"https://p.ssl.qhimg.com/t0199397a4f9c5e1b3b3.jpg\" @error=\"(e)=>{ e.srcElement.src=\'https://p.ssl.qhimg.com/t0199397a4f9c5e1b3b.jpg\'}\">',

            }
        }
   }

难道就要止步于此？？ 额付考死闹特。我不使用 v-html 不是就不会出现这个问题了嘛.

    Vue.directive('test', {
        bind: function (el, binding) {
            var MyComponent = Vue.extend({
                template: '<div>' + binding.value + '</div>',
            });
            el.appendChild(new MyComponent().$mount().$el)
        },
        update: function (el, binding) {
            var MyComponent = Vue.extend({
                template: '<div>' + binding.value + '</div>',
            });
            el.innerHTML = "";
            el.appendChild(new MyComponent().$mount().$el)
        }
    })

<template>
    <div class="demo">
          <div v-html="html"></div>
        ***************************************
        <div v-test="html"></div>
    </div>
</template>
 export default {
  data() {
            return {
                html: '<img src=\"https://p.ssl.qhimg.com/t0199397a4f9c5e1b3b3.jpg\" @error=\"(e)=>{ e.srcElement.src=\'https://p.ssl.qhimg.com/t0199397a4f9c5e1b3b.jpg\'}\">',

            }
        }
   }

其余的都可以这样搞 比如@click 这种乱七八糟的事件，下面是完整代码

<template>
    <div class="demo">
        <div v-html="html"></div>
        ***************************************
        <div v-test="html"></div>

    </div>
</template>

<script>
    import Vue from 'vue';
    // const htp = "<p><img src=\"https://p.ssl.qhimg.com/t0199397a4f9c5e1b3b3.jpg\" @error=\"(e)=>{ e.srcElement.src='https://p.ssl.qhimg.com/t0199397a4f9c5e1b3b.jpg'}\"><br/></p>";
    Vue.directive('test', {
        bind: function (el, binding) {
            var MyComponent = Vue.extend({
                template: '<div>' + binding.value + '</div>',
            });
            el.appendChild(new MyComponent().$mount().$el)
        },
        update: function (el, binding) {
            var MyComponent = Vue.extend({
                template: '<div>' + binding.value + '</div>',
            });
            el.innerHTML = "";
            el.appendChild(new MyComponent().$mount().$el)
        }
    })

    export default {
        name: "HelloWorld",
        data() {
            return {
                html: "<img src=\"https://p.ssl.qhimg.com/t0199397a4f9c5e1b3b3.jpg\" @error=\"(e)=>{ e.srcElement.src='https://p.ssl.qhimg.com/t0199397a4f9c5e1b3b.jpg'}\">",
            }
        },
    }
</script>