Кнопка внутри всплывающего окна с vue

Question

Я использовал пакет vue2-google-maps, чтобы создать собственное всплывающее окно. В моем собственном всплывающем окне я поместил кнопку, которая должна открывать новое всплывающее окно вместо старого.

Html

<gmap-info-window
  :options="infoOptions"
  :position="infoWindowPos"
  :opened="infoWinOpen"
  @closeclick="infoWinOpen=false"
>
  <div v-html="infoContent"></div>
</gmap-info-window>

Javascript для первого всплывающего окна.

    toggleInfoWindow: function (marker, idx) {
        this.infoWindowPos = marker.position;
        this.activeMarker = marker;
        this.infoContent = this.getInfoWindowContent(marker);

        //check if its the same marker that was selected if yes toggle
        if (this.currentMidx == idx) {
          this.infoWinOpen = !this.infoWinOpen;
        }
        //if different marker set infowindow to open and reset current marker index
        else {
          this.infoWinOpen = true;
          this.currentMidx = idx;
        }
      },

      getInfoWindowContent: function (marker) {
        return (`<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <div class="media">
      <div class="media-content">
        <p class="title is-4">${marker.name}</p>
      </div>
    </div>

    <div class="content">
      ${marker.description}
      <br>
      <time datetime="2016-1-1">${marker.date_build}</time>
       <button @click="getSecondPopUp">Get second popup</button>
    </div>
  </div>
</div>`);
      },

    getSecondPopUp: function () {
        console.log("why don't you work?");
}

Проблема в том, что когда я нажимаю на кнопку, второй метод не выполняется. Кто-нибудь знает, почему это может быть и как это исправить?

Заранее спасибо.

Answer 1

v-html отображает только необработанный HTML. HTML-код, который вы возвращаете из метода getInfoWindowContent, представляет собой шаблон Vue, который должен отображаться непосредственно компонентом Vue (и в зависимости от ваших настроек, если вы используете веб-пакет, вполне вероятно, что шаблоны будут скомпилированы с vue-loader и не во время выполнения).

Я не знаком с пакетом vue2-google-maps, но для достижения того, что вы хотите, вы не должны использовать v-html и вместо этого поместить источник шаблона Vue непосредственно в <gmap-info-window>. Замените все строковые интерполяции ${marker.description} шаблонными интерполяциями Vue {{ activeMarker.description }} (при условии, что activeMarker объявлен заранее в объекте data компонента, чтобы он был реактивным и отображаемым внутри шаблона). Возможно, вам придется использовать v-if для управления видимостью частей шаблона, которые обращаются к activeMarker в случае, если activeMarker имеет значение NULL (если компонент gmap-info-window не отображает свой слот, если свойство opened имеет значение false) .

В идеале v-html никогда не следует использовать, для одного это делает возможным XSS .