Recalculate the style of a GeoJSON layer based on reactive variables change

I’m sorry that I write a question here, but for some reason, StackOverflow says there is no tag for Vue2Leaflet, and I don’t have enough reputation to create a new tag. This might actually be a bug / enhancement so hopefully it will be ok.

I have a Vue2Leaflet map with a GeoJSON layer. This layer has a style that depends on additional data from the features in the GeoJSON data, and also on an external parameter (the color depends on data, and the data to show depends on a selection of the user).

When I change the external property, the style doesn’t update reactively. Is there a way to tell the style to recalculate itself?

I tried to access the mapObject and to re-set the style property (even though it’s not strictly necessary) but I got an error saying the mapObject was undefined.

My code looks something like this:

    <v-map ...>
        <v-tilelayer ... />
        <v-geojson-layer ref="geojsonLayer" :options="geoOptions" 
            :geojson="geojson" />
    </v-map>

with the style function (simplified):

    geoOptions: {
        style: feature => {
            if (this.var1 === '') return {}
            let data = feature.properties.data
            if (data[this.var1] === undefined) return {}
            if (data[this.var1][this.var2] === undefined) return {}
            return {
                fillColor: scale(data[this.var1][this.var2]).hex()
                ...
            }
        }
    }

where scale() is a chroma.js colorscale that depends on the value of this.var1. What I would like to have is that whenver this.var1 or this.var2 change (they are reactive variables), the style of the features will get re-evaluated.

I hope I expressed my problem clearly.

Thank you very much! Omri

[DonNicoJs]

@cordlesstuba you can do something like this:

1. create computed property that changes anytime ANY of the properties that you are interested in change
2. add a watcher on such property
3. add a code like this in the watcher body

updateGeoJsonStyle (newStyle) {
      this.$nextTick(() => {
        if (this.$refs.geoJson && this.$refs.geoJson.mapObject) {
          this.$refs.geoJson.mapObject.eachLayer((layer) => {
              layer.setStyle(newStyle);
          });
        }
      });
    }

[JWDobken]

I had the same issue but with mouse hovering and managed to implement the setStyle option onEachElement, like:

function onEachFeature (feature, layer) {
    layer.on('mouseover', function (e) {
        e.target.setStyle({
            fillColor: '#ff0033',
        });
    });
    layer.on('mouseout', function (e) {
        e.target.resetStyle()
    });
}

Only the resetStyle does not work yet