javascript - 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。您从 getInfoWindowContent 返回的 HTML方法是一个 Vue 模板，必须直接由 Vue 组件渲染(并且根据您的设置，如果您使用 webpack，那么模板可能会使用 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有可能。