Lets say I create an Element with
let centerIconDiv = document.createElement('div');
centerIconDiv.className += 'centerIcon box-shadow m-2 rounded-2';
And add this to google maps
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(centerIconDiv);
How do I add Vue directive to the "centerIconDiv"? I want to have something like v-if or v-show and add :class etc.
I can't really find the solution, because I don't need to render a template. What can I do?
I'm not convinced this is the best answer to your question, but you can manually mount a globally registered Vue component after you instantiate the component like so:
// This was taken from the docs
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">item #{{ $vnode.key }}: You clicked me {{ count }} times.</button>'
})
// This appends the new component with directives:
$('#components-demo').append(`
<button-counter v-for="i in [1,2,3,4,5]" v-if="i % 2 === 0" :key="i"></button-counter>
`)
// This registers the component, activating the directives
new Vue({ el: '#components-demo' })<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="components-demo"></div>Another thing you could do is make the parent of both your Google Maps element and the vue component into a component, itself, and include the logic for instantiating the new vue components into that parent component, which would probably be a better pattern to maintain.
