Tengo una matriz llamada etiquetas que contienen nombres para restaurantes. Quiero usar esto en el ciclo for en el GMapMarker para ir a recuperar datos de la matriz que tiene el nombre.
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> Intenté usar ${{restaurant}} . Pero parece que no recupera datos de la matriz.
Aquí hay un ejemplo usando sus datos. las tags y los restaurants se exponen a la plantilla mediante propiedades calculadas .
NOTAS:
GmapMarker para que pudiera ejecutarse en mi entorno. <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>Si sus valores calculados se leen desde el estado de Vuex, su sección de secuencia de comandos puede parecerse a:
<script> import { mapState } from 'vuex'; export default { computed: { ...mapState(['tags', 'restaurants']), }, }; </script>