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">
        <h2>v-html:</h2>
        <div v-html="html"></div>
        ***************************************
        <h2>v-test:</h2>
        <div v-test="html"></div>
    </div>
</template>

<script>
  import Vue from 'vue';

  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>
<style lang="scss">
    .demo {

    }
</style>