I need to create a vuejs component and pass it into a library (mapbox) as pure html. Mapbox has a setHtml method for popups that I'm trying to populate.
https://docs.mapbox.com/mapbox-gl-js/example/popup/
var popup = new mapboxgl.Popup({ closeOnClick: false })
.setLngLat([-96, 37.8])
.setHTML('<h1>Hello World!</h1>')
.addTo(map);
I haven't been able to find any way to pre-render a specific component into html that I could then insert into the mapbox call. Sort of like v-html in reverse.
set ref attribute for your component, and then you can get rendered HTML content of component by using this.$refs.ComponentRef.$el.outerHTML, and remember don't do this when created.
<template>
<div class="app">
<Hello ref="hello" />
</div>
</template>
<script>
import Hello from './Hello.vue'
export default {
name: 'App',
components: {
Hello,
},
created() {
// wrong, $el is not exists then
// console.log(this.$refs.hello.$el.outerHTML)
},
mounted() {
console.log(this.$refs.hello.$el.outerHTML)
},
}
</script>
