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

Question

I am creating a property app and want to filter map markers based on user input. I can filter a list based on computed(), but I want to be able to update markers in the same way. Am I forced to execute map marker population at created() or there a way to initialise the map?

Here is the code I'm using to create the map markers and the computed code I am using to filter the list of items.

computed () {
    filteredList() {
      return this.lists
        .filter((item) => {
          return (
            item.address.toLowerCase().includes(this.search.toLowerCase()) &&
            (this.selectBedrooms.length === 0 ||
              this.selectBedrooms.includes(item.bedrooms))
          );
        })
    },
},

created () {
         this.filteredList.map(element => {
      this.markers.push(
        {
          position: {
            lat: Number(element.lat),
            lng: Number(element.lng)
          },
          infoText: {
         /*    name: element.name, */
            address: element.postcode,
          }
        }
      )
    }) 
}

question from:https://stackoverflow.com/questions/65916418/does-vue-js-have-to-create-and-populate-markers-on-google-map-at-created

Answer 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)"
            />