Acces to child property/methods

Hello,

I’m trying out Vuejs these days. I’m not a font-dev expert though …

Here is my question : I’m working on a project with an API serving geo_shapes through json format. I have all my polygons displayed. In order to understand the underlying mechanism, I’m wondering how to proceed to change the polygon fillColor on mousever for highlighting. What is the recomended way to make this done and how can I access the setFillColor in my Vue component ?

Here is chunks of component code :

<template>
<v-map id="leaflet">
    <v-tilelayer></v-tilelayer>

    <v-polygon v-for="area in areas" :key="area.id"
                           :lat-lngs="area.geometry.coordinates"
                           @l-dblclick="goto_sublevel(area)"
                           @l-mouseover="change_color()">  <!--???-->
        <v-popup :content="area.name"></v-popup>
    </v-polygon>

    <v-polygon v-for="area in parent_area" :key="area.id"
                           :lat-lngs="area.geometry.coordinates" :color="'#ff6056'"></v-polygon>
</v-map>
</template>

<script>
import Vue2Leaflet from 'vue2-leaflet';

export default {

        components: {
            'v-map': Vue2Leaflet.Map,
            'v-tilelayer': Vue2Leaflet.TileLayer,
            'v-polygon': Vue2Leaflet.Polygon,
            'v-popup': Vue2Leaflet.Popup
        },

        methods : {
        goto_sublevel: function (level) {
                // do something to retrieve data of next geographical level ...
                },
        change_color: function (?) {
                // ??? is it here that magic should happen ?
        },

}


</script>

Anyway, I found your api clear enough to had some fun with leaflet. Thanks for your job ! 😉

Dithyrambe

[dithyrambe]

Nice !

Thanks all for your perfect explications ! I’ll go for the setStyle method. Looks cleaner to me. However, all insights were welcome. –> issue solved 😄

And thx again for all the hard work on vue2-leaflet !

Dithyrambe

[KoRiGaN]

Hi @dithyrambe,

In vue2-leaflet you can set fillColor / opacity / weight etc the way 3RedM0 explained and this is the “more vue2-leaflet” approach: using reactivity of vue with leaflet.

If you want to access vue2-leaflet object and methods instead of using the property you can see this example. If you want to access leaflet object and methods instead you can see this example.

Let me know if these examples solved your issue.

Cheers,

Mickaël