Vue-在生成的html代码中添加v-on目录

Question

在我的vue项目中，我使用谷歌地图api和over-marker图标，用自定义html代码生成infoWindow。我想在标签v-on中添加的代码：点击监听器。每次我的尝试都失败了，总是把它生成为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>' });

如何添加此部分：点击="this.addRemoveFavorite(place(">正确吗？

谢谢。

Answer 1

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

google.maps.InfoWindow的构造函数也接受DOM节点，所以您可以用代码创建组件，然后将其ref传递给InfoWindow构造函数。

另一种方法是使用vue谷歌地图。