在谷歌地图信息窗口-vuejs中包含路由器链接

Question

我正在用VueJS在Laravel 5.7中构建一个应用程序。我有一个谷歌地图（使用vue2谷歌地图构建），有200个标记，每个标记都有一个信息窗口。我想在infoWindow中包含一个路由器链接，但由于该链接是作为字符串传递的，所以Vue似乎没有对其进行解析。

这是我目前的组件-除了路由器链接，所有的工作

有人能建议一种方法来解析路由器链接吗？

谢谢你

<template>
<div id="map">

    <gmap-map
            :center="center"
            :zoom="11"
            style="width:100%;  height: 750px;"
            map-type-id="satellite"
    >

        <GmapMarker v-for="location in locations"
                    :key="location.id"
                    @click="toggleInfoWindow(location, location.id)"
                    :position="({
                        lat : location.latitude,
                        lng : location.longitude,
                        }
                    )"
        ></GmapMarker>
        <gmap-info-window
                :options="infoOptions"
                :position="infoWindowPos"
                :opened="infoWinOpen"
                @closeclick="infoWinOpen=false"
        >
            <div v-html="infoContent"></div>
        </gmap-info-window>

    </gmap-map>


</div>
</template>

<script>

    export default {

        data() {
            return {
                center: {lat: 51.553726, lng: -0.110035},
                locations: [],
                visits:[],
                infoContent: '',
                infoWindowPos: {
                    lat: 0,
                    lng: 0
                },
                infoWinOpen: false,
                currentMidx: null,
                //optional: offset infowindow so it visually sits nicely on top of our marker
                infoOptions: {
                    pixelOffset: {
                        width: 0,
                        height: -35
                    }
                }
            }

        },

        methods: {
            getLocations(){

                window.axios.get('/api/locations').then(({data})=>{
                    data.forEach(location => {
                        this.locations.push(location)
                    });
                });
            },


            toggleInfoWindow: function (marker, idx) {

                this.infoWindowPos = ({
                        lat : marker.latitude,
                        lng : marker.longitude,
                    }
                );
                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="info_window container">
                          <h3>${marker.name}</h3>
                          <a href="/location/${marker.slug}"><div class="mx-auto btn btn-success">More Info</div></a>
                          <router-link :to="/location/${marker.slug}" class="mx-auto btn btn-success">RL More Info</router-link>
                         </div>`);
            },


        },

        created(){
            this.getLocations()

        },


    };
</script>

<style>

</style>

Answer 1

以下代码摘录中使用的v-html指令不能用于编写模板部分^[1]。

<div v-html="infoContent"></div>

在这个用例中，infoContent可以作为一个单独的组件来实现，可以通过以下方式注册^[2]

<template>
<!--...-->
  <gmap-info-window
    :options="infoOptions"
    :position="infoWindowPos"
    :opened="infoWinOpen"
    @closeclick="infoWinOpen=false"
  >
    <info-content 
      v-bind:slug="marker.slug"
      v-bind:name="marker.name"
    >
    </info-content>
  </gmap-info-window>
<!--...-->
</template>

<script>
import InfoContent from './components/InfoContent.vue'

export default {
   components: {
     InfoContent
   },
   data() { /*...*/ },
   methods: { 
     //...
     toggleInfoWindow (marker, idx) {
       //...
       this.marker = marker;
       //...
     }
   }
}
</script>

组件/InfoContent.vue

<template>
   <div class="info_window container">
    <h3>{{ name }}</h3>
    <a href="/location/{{ slug }}">
      <div class="mx-auto btn btn-success">More Info</div>
    </a>
    <router-link
      :to="/location/{{ slug }}"
      class="mx-auto btn btn-success">
      RL More Info
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'info-content',
  props: {
    slug: String,
    name: String
  }
}
</script>

Answer 2

v-html指令只是将传递给它的数据作为该元素的innerHtml直接传递到DOM中。如果您想传递已经是html的内容，这非常好，但如果Vue需要对其进行处理，这就不太好了。

相反，您必须使用模板本身。如果它在组件本身，就像这里，这很简单。与其生成一些html字符串，不如将整个内容放在模板中，并使用小胡子符号、v-if等来控制在何处显示的内容。如果您有一个单独的组件，您可以使用插槽来控制传递到信息窗口的内容。然后通过父级模板将内容传递到该插槽。

要解决您的问题，您必须这样做。首先将您的标记指定给我们可以在模板中使用的某个变量。在这种情况下，我们可以重复使用infoContent。

    toggleInfoWindow: function (marker, idx) {
        this.infoWindowPos = ({
                lat : marker.latitude,
                lng : marker.longitude,
            }
        );
        this.infoContent = 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;
        }
    },

现在，我们修改模板，使您的html和组件位于gmap信息窗口中。由于我们将活动标记指定给了infoContent，所以我们在这里引用它。

    <gmap-info-window
            :options="infoOptions"
            :position="infoWindowPos"
            :opened="infoWinOpen"
            @closeclick="infoWinOpen=false"
    >
        <div class="info_window container">
            <h3>{{ infoContent.name }}</h3>
            <a :href="`/location/${infoContent.slug}`"><div class="mx-auto btn btn-success">More Info</div></a>
            <router-link :to="`/location/${infoContent.slug}`" class="mx-auto btn btn-success">RL More Info</router-link>
        </div>
    </gmap-info-window>

现在，当您调用toggleInfoWindow时，信息窗口现在将使用新的标记信息更新。