What is the best way to retrieve a variable's value using its reference?

Question

What is the best way to retrieve a variable's value using its reference?

Within my array called tags are the names of various restaurants. I am attempting to utilize this information within a for loop in the GMapMarker to access data based on the restaurant 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 experimented with using ${{restaurant}}, but unfortunately, it appears that the data is not being retrieved from the array as intended.

javascript vue.js

Answer 1

Answer №1

Check out this demonstration using the provided data. categories and dining options are accessible in the template through computed properties.

REMARKS:

I modified "burger king" to "burgerking" for a successful match.
The example template was adjusted to utilize lists instead of GmapMarker for compatibility within my environment.

<template>
  <div>
    <div v-for="category in categories" :key="category.id">
      <ul>
        <li
          v-for="(diningOption, index) in restaurants[category.name]"
          :key="index"
          :position="diningOption.position"
          :icon="diningOption.icon"
          @click="openMenu(diningOption)"
        >
          {{ diningOption.position }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    categories() {
      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 pulled from Vuex state, your script section may resemble:

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['categories', 'restaurants']),
  },
};
</script>

Answer 2

Check out this demonstration using the provided data. categories and dining options are accessible in the template through computed properties.

REMARKS:

I modified "burger king" to "burgerking" for a successful match.
The example template was adjusted to utilize lists instead of GmapMarker for compatibility within my environment.

<template>
  <div>
    <div v-for="category in categories" :key="category.id">
      <ul>
        <li
          v-for="(diningOption, index) in restaurants[category.name]"
          :key="index"
          :position="diningOption.position"
          :icon="diningOption.icon"
          @click="openMenu(diningOption)"
        >
          {{ diningOption.position }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    categories() {
      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 pulled from Vuex state, your script section may resemble:

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['categories', 'restaurants']),
  },
};
</script>

What is the best way to retrieve a variable's value using its reference?

Answer №1

Similar questions

Utilize React Material UI to elegantly envelop your TableRows

JQuery Challenge: Solving Dynamic Modal Issues

Initiate node and PM2 application using a batch file

Is there a way to change a weather api into local time using ReactJS/JavaScript?

Is there a way to render an image onto a canvas using an input tag?

Incorporating a TypeScript module into a JavaScript module within a React application

What steps do I need to take in order to create a histogram with perfect symmetry?

Tips for successfully including a forward slash in a URL query string

Issue with Vue.js 2: Image tag disappears following re-render when fetching data from the server

Is the Facebook AJAX Permissions Dialog displayed outside of a Pop-Up?

ExpressJS looping back

Exploring the possibilities of updating the version dynamically in package.json file

The useParams() function will return an empty value upon the component's initial render

Failed to retrieve UI data from localstorage while performing an asynchronous action

Just diving into JavaScript, what makes jQuery so powerful?

Tips for capturing text input from a Quill rich text editor div

Can someone clarify if there is a distinction between using x.f.call(x, ...) and x.f(...) in JavaScript?

Navigating the Spine

A dynamic context menu using jQuery within AJAX-loaded content

How to selectively load specific scripts in index.html with the use of angular.js