[Vuejs]-Does Vue js have to create and populate markers on Google map at Created()

1👍

The problem I had is that I was looking at the created () function as the function that was creating the google map points, which was incorrect. Ive seen that there is a v-for loop referencing markers which can be changed for a computed property that updates the computed function runs.

In the code below I exchanged ‘Markers’ to ‘updatedMarkers’ from the computed property.

 computed: {
 updateMarkers () {
 return this.markers.slice()
           .filter((marker) => {
          return (
              marker.infoText.id >= this.priceabove
          );
        })   
    } 
    },
},
 <GmapMarker
              :key="index"
              v-for="(m, index) in updateMarkers"
              :position="m.position"
              :clickable="true"
              @click="toggleInfoWindow(m,i)"
            />

0👍

I might be misunderstanding the question here, but you could write a watch which runs whenever your computed property changes. Something like this:

computed () {
    filteredList() {
        return this.lists.filter((item) => {
            return (
                item.address.toLowerCase().includes(this.search.toLowerCase()) &&
                (this.selectBedrooms.length === 0 ||
                this.selectBedrooms.includes(item.bedrooms))
            );
        })
    }
},
watch() {
    filteredList(list) {
        list.map(element => {
            this.markers.push(
            {
                position: {
                    lat: Number(element.lat),
                    lng: Number(element.lng)
                },
                infoText: {
                /*    name: element.name, */
                    address: element.postcode,
                }
            })
        }) 
    }
}

Another option would be to create a second computed property which contains the mapping functionality.

Leave a comment