Рендеринг компонентов VueJS в информационное окно Google Map

Question

Я пытаюсь визуализировать компонент vue js, который просто -

var infowindow_content = "<google-map-infowindow ";
infowindow_content += "content='Hello World'";
infowindow_content += "></google-map-infowindow>";

, передав его в информационное окно маркера

this.current_infowindow = new google.maps.InfoWindow({
    content: infowindow_content,
});
this.current_infowindow.open(context.mapObject, marker);

А компонент vueJS -

<template>
    <div>
        {{content}}
    </div>
</template>

<script>
module.exports = {
    name: 'google-map-infowindow',
    props: [ 
        'content',
    ],
}
</script>

Однако это не работает, и окно пустое.

Answer 1

После повторного рассмотрения этого сегодня я смог сделать это, программно создав экземпляр компонента vue и смонтировав его, прежде чем просто передать его визуализированный шаблон HTML в качестве содержимого информационного окна.

InfoWindow.vue

<template>
    <div>
        {{content}}
    </div>
</template>

<script>
module.exports = {
    name: 'infowindow',
    props: [ 
        'content',
    ],
}
</script>

И в той части кода, которую необходимо создать перед открытием информационного окна: ... импортировать InfoWindowComponent из './InfoWindow.vue'; ...

var InfoWindow = Vue.extend(InfoWindowComponent);
var instance = new InfoWindow({
    propsData: {
        content: "This displays as info-window content!"
    }
});

instance.$mount();

var new_infowindow = new google.maps.InfoWindow({
    content: instance.$el,
});

new_infowindow.open(<map object>, <marker>);

Примечание: я не экспериментировал с наблюдателями и управляемыми событиями вызовами для этого.

Answer 2

В шаблоне vue.js интерполяция с "двойными усами" интерпретирует его содержимое как обычный текст, а не HTML (таким образом, избегая его). Если вы хотите испустить HTML, вам нужно использовать директиву v-html:

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

Для справки см. Необработанный HTML в руководстве и документах v-html API.

Обратите внимание, что в этом случае привязки данных не учитываются, поэтому я не совсем уверен, что манипулирование необработанным HTML является лучшей стратегией.