Comin from this question custom marker for vue2-google-maps
I have markers coming from an endpoint and I am adding markers on created() of a Vue component
<gmap-marker :key="i" v-for="(m,i) in markers" :position="m.position" :clickable="true" @click="toggleInfoWindow(m,i)" :icon="{ url: require('./online.png') }"></gmap-marker>
m has such value
{
infoText: "synno-hlcna",
position: {
lat: 53.3600171,
lng: -6.2630125
},
status: "online"
}
How I can use m.status value in require().
I have tried to add full { url: require('./online.png') } through m.url as well as just require(m.url) and Url was './online.png', It gave me an error as
module not found ./online.png
I want to change the peg colour on the base of status. I have to pngs, online/offline according to m.
How is that possible to bind value in require('./{status}.png') so it may work?
I have tried this way as well
:icon={ url: require('./${m.status}.png') }
UPDATE: I tried to use v-bind such as
<gmap-marker :key="i" v-for="(m,i) in markers" :position="m.position" :clickable="true" @click="toggleInfoWindow(m,i)" v-bind:icon="{ url: require(m.status) }"></gmap-marker>
its giving error as Cannot find module './online.png' How can we make it work ? it works only if I put ./online.png by myself.
