I have an array called tags which contain names for restauants. I want to use this in the for loop in the GMapMarker to go to retrieve data from the array that has the name.
let tags[] = {name: 'mcdonalds', id: '1'}, {name: 'burger king', id: '2'}, {name: 'subway', id: '3'}
mcdonalds: [{icon: 'mdi-mcdonalds', position: '2323, 4234'}, {icon: 'mdi-mcdonalds', position: '77654, 34554'} ]
burgerking: [{icon: 'mdi-burgerking', position: '756656, 43243'}, {icon: 'mdi-burgerking', position: '8744, 36774'} ]
subway: [{icon: 'mdi-subway', position: '2154, 65654'}, {icon: 'mdi-subway', position: '6453, 3562'} ]
<div v-for="tag in tags.name" :key="tag">
<GmapMarker
v-for="(restaurant, index) in **tag**"
:key="index"
:position="restaurant.position"
:icon="restaurant.icon"
@click="openMenu(restaurant)"
/>
</div>
I tried using ${{restaurant}}. But it seems to not retrieve data from the array.
Here's an example using your data. tags and restaurants are exposed to the template via computed properties.
NOTES:
GmapMarker so it could run in my environment.<template>
<div>
<div v-for="tag in tags" :key="tag.id">
<ul>
<li
v-for="(restaurant, index) in restaurants[tag.name]"
:key="index"
:position="restaurant.position"
:icon="restaurant.icon"
@click="openMenu(restaurant)"
>
{{ restaurant.position }}
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
computed: {
tags() {
return [
{ name: 'mcdonalds', id: '1' },
{ name: 'burgerking', id: '2' },
{ name: 'subway', id: '3' },
];
},
restaurants() {
return {
mcdonalds: [
{ icon: 'mdi-mcdonalds', position: '2323, 4234' },
{ icon: 'mdi-mcdonalds', position: '77654, 34554' },
],
burgerking: [
{ icon: 'mdi-burgerking', position: '756656, 43243' },
{ icon: 'mdi-burgerking', position: '8744, 36774' },
],
subway: [
{ icon: 'mdi-subway', position: '2154, 65654' },
{ icon: 'mdi-subway', position: '6453, 3562' },
],
};
},
},
};
</script>
If your computed values are read from Vuex state, your script section may look something like:
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['tags', 'restaurants']),
},
};
</script>