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的模板部分的可见性（除非gmap-info-window组件未呈现其插槽opened道具是假的。）

理想情况下，永远不应使用v-html，因为import 'package:flutter/material.dart'; class BarButton extends StatelessWidget { final Icon buttonICons; final VoidCallback pressAction; BarButton({ this.buttonICons, this.pressAction }); @override Widget build(BuildContext context) { return IconButton( icon: buttonICons, onPressed: pressAction ); } }可能会使用import 'package:flutter/material.dart'; import 'package:testapp/Components/BarButton.dart'; class MainScreen extends StatefulWidget { @override _MainScreenState createState() => new _MainScreenState(); } class _MainScreenState extends State<MainScreen> { onPrint(){ print("hello"); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("HELLO"), leading: IconButton(icon: Icon(Icons.menu),onPressed: (){},), actions: <Widget>[ new BarButton( buttonICons: Icon(Icons.search), pressAction: (){ onPrint(); }, ), IconButton( icon: Icon(Icons.tune), onPressed: () { print('Filter button'); }, ), ], ), ); } }。

Answer 2

考虑使用由Vue完成的弹出窗口，而不是由地图给出的弹出窗口。试试这个https://www.npmjs.com/package/@soldeplata/popper-vue

用vue弹出一个按钮

2 个答案: