vue2-googlemap api でinfowindow内でイベント発生させたい

vue.jsでvue2-googlemapを使ってgooglemapをカスタムしています。infowindown内でボタンを設置してクリックイベントを発生させたいのですが、infowindow内だと上手く動きません。（ここ以外だったら動きました）

どなたかご教授お願いします。下記がコードになります。（所々消してます）
特にここです。(v-on:clickが上手くいきません)

getInfoWindowContent: function (marker_items) {
          return ([`<div id="info">
                    <p>${marker_items.name}</p>
                    <div class="flex">
                      <img v-bind:src="src" height="30pt" width="30pt"/>
                      <img v-bind:src="power" height="30pt" width="30pt"/>
                      <p>${marker_items.power}</p>
                    </div>
                    <button v-on:click="openModal" id="jumpDetails">詳細</button>
                   </div>`].join(""));
        },

全体です。

<template>
  <div id="map">
    <button v-on:click="openModal">open</button>
    <GmapMap :center="center" :zoom="zoom" :options="{disableDefaultUI: true,}" style="width:100%; height:500pt;">
      <GmapMarker v-for ="(m,id) in marker_items" :position="m.position" :icon="m.icon" :key="id" @click="toggleInfoWindow(m,id)">
      </GmapMarker>
      <GmapInfoWindow :options="infoOptions" :position="infoWindowPos" :opened="infoWinOpen" @closeclick="infoWinOpen=false">
        <div v-html="infoContent"></div>
      </GmapInfoWindow>
    </GmapMap>
    <detailModal/>
    <img v-bind:src="power" height="30pt" width="30pt"/>
    <div id="overlay" v-show="showContent">
      <div id="content">
        <p>これがモーダルウィンドウです。</p>
        <p><button v-on:click="closeModal">close</button></p>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
 


  export default{
    // components:{
    //   detailModal
    // },
    props: ['chosen'],
    data(){
      return {
        wifi:'',
        center: {lat:35.690218, lng:139.700592},
        zoom: 15,
        marker_items:[],
        infoContent: '',
        infoWindowPos: {
         lat: 0,
         lng: 0
        },
        infoWinOpen: false,
        infoOptions: {
          pixelOffset: {
            width: 0,
            height: -35
          }
        },
        showContent: false,

      };
    },
    mounted: function () {
      this.$nextTick(function(){
          if (process.client) {
            if (!navigator.geolocation) {
              alert('現在地情報を取得できませんでした。お使いのブラウザでは現在地情報を利用できない可能性があります。エリアを入力してください。')
              return
            }

            const options = {
              enableHighAccuracy: false,
              timeout: 5000,
              maximumAge: 0
            }

            navigator.geolocation.getCurrentPosition(this.success, this.error, options)
          }
      });


    },
    methods:{
        success (position) {
         this.center.lat = position.coords.latitude
         this.center.lng = position.coords.longitude
        },
        error (error) {
         switch (error.code) {
           case 1: //PERMISSION_DENIED
             alert('位置情報の利用が許可されていません')
             break
           case 2: //POSITION_UNAVAILABLE
             alert('現在位置が取得できませんでした')
             break
           case 3: //TIMEOUT
             alert('タイムアウトになりました')
             break
           default:
             alert('現在位置が取得できませんでした')
             break
         }
        },
        pushmarker:function () {
          const params = {
            lat: this.center.lat,
            lng: this.center.lng
          };
          axios.get('http://127.0.0.1:8000/api/v1/current_location_api/current_location_list/',{params})
          .then(response => {
            this.marker_items.position.lat = response.data.longitude,
            this.marker_items.position.lng = response.data.latitude
            // this.marker_items.name =,
            // ここにmarkeritemsのなかにいれる物を上記のようにかく。
          })
        },
        searchResult: function () {
          axios.get('http://jsonplaceholder.typicode.com/users')
          .then(response => {
            this.marker_items[0].position.lat = response.data.geo.lat,
            this.marker_items[0].position.lng = response.data.geo.lng
       
          })
        },
        toggleInfoWindow: function (marker_items, idx) {
          this.infoWindowPos = marker_items.position;
          this.infoContent = this.getInfoWindowContent(marker_items);
          this.infoWinOpen = true;

          //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;
          }
        },
        // convertIcon: function (marker_items) {
        //
        // }
        getInfoWindowContent: function (marker_items) {
          return ([`<div id="info">
                    <p>${marker_items.name}</p>
                    <div class="flex">
                      <img v-bind:src="src" height="30pt" width="30pt"/>
                      <img v-bind:src="power" height="30pt" width="30pt"/>
                      <p>${marker_items.power}</p>
                    </div>
                    <button v-on:click="openModal" id="jumpDetails">詳細</button>
                   </div>`].join(""));
        },
        openModal: function(){
          this.showContent = true
        },
        closeModal: function(){
          this.showContent = false
        }
    },
  }
</script>

行動規範の内容に同意します

回答1件

template内に非表示のボタンを設置し、InfoWindow内のボタンをクリックしたときにtemplate内の非表示のボタンを発火させる方法でできるかと思います。

html
1<template>
2    <button @click="openModal" id="openModalBtn" style="visibility: hidden;"></button>
3</template>

js
1getInfoWindowContent: function (marker_items) {
2          return ([`<div id="info">
3                    <p>${marker_items.name}</p>
4                    <div class="flex">
5                      <img v-bind:src="src" height="30pt" width="30pt"/>
6                      <img v-bind:src="power" height="30pt" width="30pt"/>
7                      <p>${marker_items.power}</p>
8                    </div>
9                    <button onclick="document.getElementById('openModalBtn').click()"; id="jumpDetails">詳細</button>
10                   </div>`].join(""));
11        },