Sub-component inside v-popup and v-tooltip

Hi @KoRiGaN,

Is it possible to use sub-component inside the content of v-popup and v-tooltip, instead of pure HTML string inside the content property?

So we can do this kind of stuff:

<div id="app">
  <v-map :zoom="zoom" :center="center">
    <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
    <v-marker :lat-lng="marker">
      <v-popup>
        <button @click='counter += 1'>{{ some_content }}</button>
      </v-popup>
    </v-marker>
  </v-map>
</div>

Cheers, Tortue Torche

[mtdavidson]

@tortuetorche I was trying to do the same thing but couldn’t quite figure it out. I ended up creating a new component with properties. As you need to build up a string to pass to bindPopup. It might not be the best method but it did work.

<template>
</template>

<script>

    import eventsBinder from '../utils/eventsBinder.js';
    import propsBinder from '../utils/propsBinder.js';

    const events = [
        'add',
        'remove',
        'popupopen',
        'popupclose',
        'tooltipopen',
        'tooltipclose'
    ];

    const props = {
        content: {
            default: '',
        },
        thumbnail: {
            default: '',
        },
        rating: {
            default: 0,
        },
        link: {
            default: ''
        }
    };

    export default {
        props: props,
        computed: {
            // a computed getter
            popupContent: function () {
                // There is probably a better way to do this
                return `
                    <div class="media">
                      <div class="media-left">
                        <img src="${this.thumbnail}" alt="" height="72" width="72">
                      </div>
                      <div class="media-body">
                        <a href="${this.link}"><h6 class="media-heading">${this.content}</h6></a>
                        Rating: <b>${this.rating}</b>
                      </div>
                    </div>
                `;
            }
        },
        mounted() {
            this.mapObject = L.popup();
            eventsBinder(this, this.mapObject, events);
            propsBinder(this, this.mapObject, props);
            if (this.$parent._isMounted) {
                this.deferredMountedTo(this.$parent.mapObject);
            }
        },
        beforeDestroy() {
            if (this.parent.getPopup()) {
                this.parent.unbindPopup();
            }
        },
        methods: {
            deferredMountedTo(parent) {
                this.parent = parent;
                parent.bindPopup(this.popupContent);
            },
            setContent(newVal, oldVal) {
                if (newVal) {
                    this.parent.bindPopup(this.popupContent);
                } else {
                    if (this.parent.getPopup()) {
                        this.parent.unbindPopup();
                    }
                }
            },
        }
    };
</script>

[punkmap]

Nice feature.