vue动态生成html事件失效

背景

   项目开发中有这样一个需求，地图（高德）标记点点击需要展示标点信息框，标点信息框中有个点击详情的按钮，按钮实现弹出框展示更具体详情。

效果图

问题

  这里使用地图提供的 infoWindow来实现标点信息框【js拼接html】，但是点击详情按钮无法直接调用vue里面的方法

原因

  动态拼接生成的HTML代码没有被我党的洗礼（Vue渲染）,所以给详情按钮添加@click事件是没法被执行的。

思路

   1、能不能把渲染后的页面强制洗礼一下(似乎不错)，使用this.forceUpdate是更新数据做页面渲染驱动，这里数据压根没变哈

   2、挂载全局调用， methods中定义一个方法挂载到全局，在button中用原生的js onClick事件调用，这个方法是可行的，但是不完美，动不动就全局有点慌哈。

   3、事件代理，在包裹动态生成的HTMl代码上（原Vue上的HTML代码）定义一个@click事件，这个事件实现的功能很简单就是代理 button 事件，button 上设置一下想附带的数据 eg: data-item='xxx'。

/**
         * @param {Object} e
         * 响应详情事件
         */
        handleClick(e) {
            if (e.target.nodeName.toLowerCase() === 'button') {
                console.log(e.target.dataset.item)
            }
        },

总结

   方式很多重点是动动心思哈【还有一些其他思路，有兴趣的可以留言一起探讨】