How can I get a value of a variable by reference?

Question

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.

Answer 1

Here's an example using your data. tags and restaurants are exposed to the template via computed properties .

NOTES:

• I altered "burger king" to be "burgerking" so the match would work.
• I changed the example template to use lists instead of 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>