Vue中使用事件代理,解决v-html中原生代码的事件绑定失效

最近在做一个Vue项目，开发一个消息列表模块，由于一些原因，后台返回给我的数据是一堆原生Html代码，下面截取一个样例：

data() {
      return {

       // 测试用的Html代码
        contents: '<table>\n' +
          '\t<tr>\n' +
          '\t\t<td style=\'text-align:left;padding-right:13px\'>正常区</td>\n' +
          '\t\t<td style=\'text-align:right;padding-left:13px\'><A style=\'text-decoration:none\'  data-id="1"  onclick="return false;" HREF=\'http://H1\'>192</A>个</td>\n' +
          '\t</tr>\n' +
          '\t<tr>\n' +
          '\t\t<td style=\'text-align:left;padding-right:13px\'>高区</td>\n' +
          '\t\t<td style=\'text-align:right;padding-left:13px\'><A style=\'text-decoration:none\'onclick="return false;" HREF=\'http://H2\'>6</A>个</td>\n' +
          '  </tr>\n' +
          '  <tr>\n' +
          '    <td style=\'text-align:left;padding-right:13px\'>负台区</td>\n' +
          '    <td style=\'text-align:right;padding-left:13px\'><A style=\'text-decoration:none\' onclick="return false;" HREF=\'http://H3\'>16</A>个</td>\n' +
          '  </tr>\n' +
          '  <tr>\n' +
          '    <td style=\'text-align:left;padding-right:13px\'>不可区</td>\n' +
          '    <td style=\'text-align:right;padding-left:13px\'><A style=\'text-decoration:none\' onclick="return false;" HREF=\'http://H4\'>1</A>个</td>\n' +
          '  </tr>\n' +
          '  <tr>\n' +
          '    <td style=\'text-align:left;padding-right:13px\'>覆盖</td>\n' +
          '    <td style=\'text-align:right;padding-left:13px\'><A style=\'text-decoration:none\' onclick="return false;" HREF=\'http://H5\'>0</A>个</td>\n' +
          '  </tr>\n' +
          '  <tr>\n' +
          '    <td style=\'text-align:left;padding-right:13px\'>成功</td>\n' +
          '    <td style=\'text-align:right;padding-left:13px\'><A style=\'text-decoration:none\' onclick="return false;" HREF=\'http://H6\'>0</A>个</td>\n' +
          '  </tr>\n' +
          '  <tr>\n' +
          '    <td style=\'text-align:left;padding-right:13px\'>连续高区</td>\n' +
          '    <td style=\'text-align:right;padding-left:13px\'><A style=\'text-decoration:none\' onclick="return false;" HREF=\'http://H7\'>0</A>个</td>\n' +
          '  </tr>\n' +
          '  <tr>\n' +
          '    <td style=\'text-align:left;padding-right:13px\'>连续负区</td>\n' +
          '    <td style=\'text-align:right;padding-left:13px\'><A style=\'text-decoration:none\' onclick="return false;" HREF=\'http://H8\'>0</A>个</td>\n' +
          '  </tr>\n' +
          '  <tr>\n' +
          '    <td style=\'text-align:left;padding-right:13px\'>增加</td>\n' +
          '    <td style=\'text-align:right;padding-left:13px\'><A style=\'text-decoration:none\'onclick="return false;" HREF=\'http://H9\'>0</A>个</td>\n' +
          '  </tr>\n' +
          '  <tr>\n' +
          '    <td style=\'text-align:left;padding-right:13px\'>减少</td>\n' +
          '    <td style=\'text-align:right;padding-left:13px\'><A style=\'text-decoration:none\'onclick="return false;"  HREF=\'http://H10\'>3</A>个</td>\n' +
          '  </tr>\n' +
          '</table>',
        // 我的项目是个列表，用来生成列表的
        lists: [
          {
            num: 1
          },
          {
            num: 2
          }
        ]

      }
    },

然后再template中使用 v-html 添加原生Html代码(这里 contents里面的内容)；

<template>
  <div class="home-message">
  //  在父布局中，点击事件中添加相应的事件代理方法，如果不需要传递参数，可以直接写一个方法名，再在，methods中加入自己的方法
    <div v-for="(item,index) in lists" :key="index" class="list-message message-item" id="messageList"
         v-html="contents"
         @click="eventItem($event,item)">
  
    </div>
  </div>
</template>

在methods中添加事件代理方法：

 methods: {
  /**
       * 事件代理处理
       * @param e 事件代理
       * @param item 传过来的数据
       */
      eventItem(e, item) {
        var tag = '';
        // 判断是否包含相应的字符串
        if (e.target.toString().indexOf("h10") != -1){
           tag = e.target.toString().substring(7, 10);
        } else {
           tag = e.target.toString().substring(7, 9);
        }
        // 点击跳转相应的页面
        switch (tag) {
          case 'h1':
            alert(tag)
            break;
          case 'h2':
            alert(tag)
            break;
          case 'h3':
            alert(tag)
            break;
          case 'h4':
            alert(tag)
            break;
          case 'h5':
            alert(tag)
            break;
          case 'h6':
            alert(tag)
            break;
          case 'h7':
            alert(tag)
            break;
          case 'h8':
            alert(tag)
            break;
          case 'h9':
            alert(tag)
            break;
          case 'h10':
            alert(tag)
            break;
        }


        //在判断事件目标节点的时候，考虑到兼容性应该统一转换成大写或小写进行判断
        if (e.target.localName.toLowerCase() === 'a') {
          // 通过判端目标节点以后，就能在这里对其进行操作啦。
          //const parent_id = e.target.getAttribute('data-id')
          //const data = {
          //  parent_id: parent_id
          //}
          //this.changeClass(e.target.nextSibling,data)
        }
      }
    },

}

这样换一种思路，就解决了，v-html添加原生代码时，点击相应的标签时，使用事件代理，就能处理点击相应的标签时的逻辑了。

结果展示如图，点击相应的选项都会有对应的响应：