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)"
/>
- [Vuejs]-Reinit javascript function when change view in vue js
- [Vuejs]-How to load a placeholder image then toggle to the real one once HTTP calls are done?
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.
- [Vuejs]-Pass data from array to function vue
- [Vuejs]-How do I force input to an input field managed by Vue for testing?
Source:stackexchange.com