如何通過引用獲取變量的值？

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>