Vue - добавить v-on directice в сгенерированный html код

Question

В моем проекте vue я использую API карты Google и над значками маркеров, я генерирую информационное окно с пользовательским кодом html. В тот код, который я хотел бы добавить в tag v-on: нажмите listener. Каждая моя попытка не удалась, всегда 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 ( место) " правильно?

Спасибо.

Answer 1

Здесь 2 подхода, которые помогут вам достичь такой функциональности, с более чистыми шаблонами и улучшенным кодом:

Конструктор google.maps.InfoWindow принимает также узел DOM , поэтому вы можете создавать компоненты с вашим кодом, а затем передайте ref его конструктору InfoWindow.

Другой способ - использовать vue - google-maps.