How can I set fillOpacity for each polygon path?

[Nguyenxuanvietanh]

Hello everyone! I have a custom polygon map:

<gmap-polygon :paths="markers" 
            :options="options"
            :editable="false"
            ref="polygon"></gmap-polygon>

with the options: { strokeColor: "#0000ff", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#0000ff", draggable:false, } And I use markers as array and push data into it:

$.each(res.data.mesh, function () {
   let hash = [
      { lat: lat1, lon: lon1 },
      { lat: lat2, lon: lon2 },
      { lat: lat3, lon: lon3 },
      { lat: lat4, lon: lon4 },
   ]
   this.markers.push(hash);
}

How can I set fillOpacity for each polygon path before pushing it into this.markers for displaying like this: https://gyazo.com/4c3a2f0bc69e4880b447f09351c395c8 Thank you for reading!

[RamanSel]

I encountered similar problem, here's how I solved it :

created() {
// Getting markers (an array of objects ) without options from data 
// and making a new object using .map and spread operator
this.$data.newmarkers = markers.features.map(obj => ({
      ...obj,
      // adding each marker object a new object that holds options
      options: {
        strokeOpacity: 0.8,
        strokeWeight: 2,
        strokeColor: '#0D994F',
        fillColor: '#0D994F',
        fillOpacity: 0.4
      }
    }))
}

If you want each polygon to have it's own color depending on some property in the data I you can do something like that :

methods: {
    statusCheck: function(lotStatus) {
      if (status === 1) {
        return '#0D994F'
      } else if (status == 2) {
        return '#FAAF40'
      } else if (status == 3) {
        return '#CC2F37'
      } else if (status == 5) {
        return '#8335A0'
      } else {
        return '#303030'
      }
    },
}

And your created() lifecycle will look something like that:

 created() {
    // add options object to all lot, in order to manupalte them separately

    this.$data.newmarkers = markers.features.map(obj => ({
      ...obj,
      options: {
        strokeOpacity: 0.8,
        strokeWeight: 2,
        // here I'm using the function in order to change the color of the polygon
        strokeColor: this.statusCheck(obj.properties.status),
        fillColor: this.statusCheck(obj.properties.status),
        fillOpacity: 0.4
      }
    }))
  },

[Nguyenxuanvietanh]

@RamanSel Thank you for your reply! Have a nice day!