Vue中如何通过变量引用取值实现GMapMarker组件循环渲染

1. 修正数据定义 #

你存在两处明显的语法和结构错误：tags数组定义语法有误，且分散定义的餐厅数组无法通过字符串动态索引，需要统一封装为对象方便取值。
正确的script端代码示例（Vue3为例）：

// 标签数组
const tags = [
  {name: 'mcdonalds', id: '1'}, 
  {name: 'burger king', id: '2'},
  {name: 'subway', id: '3'}
]

// 餐厅数据统一放在对象中，key对应tags里的name值，带空格的key用引号包裹即可
const restaurantMap = {
  mcdonalds: [{icon: 'mdi-mcdonalds', position: '2323, 4234'}, {icon: 'mdi-mcdonalds', position: '77654, 34554'} ],
  'burger king': [{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'} ]
}

2. 修正模板遍历逻辑 #

你原来的v-for="tag in tags.name"写法错误，tags是数组无法直接取name属性，需要先遍历tags数组的每一项，再用项的name值从restaurantMap中取出对应餐厅数组：

<div v-for="tag in tags" :key="tag.id">
  <GmapMarker
    v-for="(restaurant, index) in restaurantMap[tag.name]"
    :key="index"
    :position="restaurant.position"
    :icon="restaurant.icon"
    @click="openMenu(restaurant)"
  />
</div>

原代码问题说明 #

• 你之前直接将字符串类型的餐厅名传给内层v-for，内层遍历的是字符串不是餐厅数组，自然无法取出icon和position字段
• 分散定义的变量无法通过字符串名称动态取值，统一封装为对象后可以用对象[键名]的语法动态获取对应值

内容的提问来源于stack exchange，提问作者tmiliketurtles