Vue2leaflet: Acces to child property/methods

[dithyrambe]

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

[KoRiGaN]

Hi @dithyrambe,

Did you try this :

<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 children" :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) {
                this.children = level.children;
        },
        change_color: function (event) {
                event.currentTarget.setFillColor('#0000FF');
        },

}

[dithyrambe]

Thanks for your reply @KoRiGaN

Maybe I should have clean my code a bit ... there are lot of useless code in my example.
Lets considere :

<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-mouseover="change_color()">
    </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 : {
        change_color: function (event) {
                event.currentTarget.setFillColor('#0000FF');
        },
}


</script>

When I get my mouse cursor on top of a polygon, I get a TypeError: event is undefined. Given the fact we do not pass any event as an argument in the template call to change_color, I guess this is not surprising :'(.
How am I suppose to tell the template which event i'm looking at when calling it. Indeed, if each event is attached to the component by the currentTarget property, I might be able to apply my color change to it :)

Thanks a lot,

Dithyrambe

[KoRiGaN]

Hi @dithyrambe,

Sorry about this. You indeed have to pass the event like this :

@l-mouseover="change_color($event)"

You can read more about it here

[KoRiGaN]

Hi @dithyrambe ,

Does my last comment fixed your issue ?

Mickaël

[KoRiGaN]

Closed as no answer for 2 weeks

[dithyrambe]

Hello,

Actually, I just start back to learn vue and I had a look again to your vue2-leaflet repo.
Sorry i did not answer earlier, I just gave up with front dev a few month ago. But I'm back ;)

The @l-mouseover="change_color($event)" did not solve the issue.
Though, I'm not sure what's going on with the $event thing.
Its likely that there is no currentTarget associate to the event. However, their is a target attribute but no setFillColor associate.

Any clue ?

Dithyrambe

[KoRiGaN]

Could you make a simple example of the issue using the JSFiddle as a starting point?

Very hard to guess what's going wrong in your case.

Cheers,

[dithyrambe]

Sure you're right,

I'll do that in the week. Thanks for your time

Dithyrambe

[dithyrambe]

Here it is.

When I hover shape I get TypeError: event.currentTarget is undefined error. And when I set event.target there is no setFillColor attribute.

https://jsfiddle.net/k04zpLx9/221/

[3RedM0]

The event.target property is the actual Leaflet object. Leaflet doesn't know about setFillColor method.

If you want to change the color of the polyline you can change the property of your object directly like in this example.

Vue and Vue2Leaflet will take care of propagating this change to Leaflet.

[dithyrambe]

Thx @3RedM0,
Thx for the tip.
Though, is there a way I can access the vue2-leaflet polygon instance. So i can use all the setX methods ? To enable all cool stuff as changing opacity, fillColor etc ... just using vue2-leaflet & vue ?

'night

EDIT:
I just get myself on this JSFiddle https://jsfiddle.net/Boumi/31uocx30/
I guess this is a fine solution for me :D
Anyway, is there a more "vue2-leaflet" approach ?

However, glad to finaly get my feature :) and get a better understanding of what underliying.
Thx all

[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

[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 :D

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

Dithyrambe

[KoRiGaN]

You're welcome!