如何通过引用获取变量的值？

Question

我有一个名为标签的数组，其中包含餐厅的名称。 我想在 GMapMarker 到 go 的 for 循环中使用它来从具有名称的数组中检索数据。

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>

我尝试使用${{restaurant}} 。 但它似乎没有从数组中检索数据。

Answer 1

这是使用您的数据的示例。 tags和restaurants通过计算属性暴露给模板。

笔记：

• 我把“burger king”改成了“burgerking”，这样比赛就可以了。
• 我将示例模板更改为使用列表而不是GmapMarker ，以便它可以在我的环境中运行。

<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>

如果您的计算值是从 Vuex state 读取的，您的脚本部分可能类似于：

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

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