Vue - 在生成的 html 代码中添加 v-on 指令答案

【问题标题】：Vue - add v-on directice in generated html codeVue - 在生成的 html 代码中添加 v-on 指令
【发布时间】：2020-03-24 05:15:40
【问题描述】：

在我的 vue 项目中，我使用 google map api 并在标记图标上使用自定义 html 代码生成 infoWindow。我想在标签 v-on:click 监听器中添加该代码。我的每次尝试都失败了，总是 vue 将其生成为 html。

我的代码

let infowindow = new google.maps.InfoWindow({
                    content:  '<div class="listing-box">\n' +

                        '        <div class="listing-rate-share">\n' +
                        '            <div class="rated-list">\n' +
                        '                <b class="la la-star"></b>\n' +
                        '                <b class="la la-star"></b>\n' +
                        '                <b class="la la-star"></b>\n' +
                        '                <b class="la la-star-o"></b>\n' +
                        '                <b class="la la-star-o"></b>\n' +
                        '                <span>(13)</span>\n' +
                        '            </div>\n' +
                        '            <span><i class="la la-share-alt"></i></span>\n' +
                        '           <a href="#" title="" '+v-on:click="this.addRemoveFavorite(place)"+'><i class="la la-heart"></i></a>' +
                        '        </div>\n' +
                        '    </div>' });

如何添加这部分 on:click="this.addRemoveFavorite(place)" 正确吗？

谢谢。

【问题讨论】：

标签： google-maps vue.js vuejs2

【解决方案1】：

这里有两种方法可以帮助您实现这样的功能，使用更简洁的模板和更好的代码：

google.maps.InfoWindowaccepts also DOM node 的构造函数，因此您可以使用代码创建组件，然后将其中的 ref 传递给 InfoWindow 构造函数。

另一种方法是使用vue-google-maps。

【讨论】：