vue 中v-for怎么遍历对象中的数组?

Question

问题描述

在地图开发中遇到个问题,覆盖物啥的都有X和Y组成的坐标点,拿到后台数据最后解析成2个数组,想要动态生成但坐标系有两个值,一个标签只能有一个v-for

问题出现的环境背景及自己尝试过哪些方法

我尝试过在外层嵌套个div先遍历一个div,里面再循环遍历一个单这样貌似变2倍了

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<!-- <div v-for="(lat,index) in lat" :key='index'> -->

  <gmap-marker v-for="(item,index) in positions" :key='index' 
  :position="{lat:Number(item.lat),lng:Number(item.lon)}">
  </gmap-marker>

<!-- </div> -->

data () {
return {
  position: [],
  positions: {
    lat: [],
    lon: []
  },   
 }
},

this.position = reponse.data.data;
  this.position.forEach(ele => {
    this.positions.lat.push(ele.lat);
    this.positions.lon.push(ele.lon);
  })

你期待的结果是什么？实际看到的错误信息又是什么？

我希望能把2个数组,一个v-for就循环出来,麻烦了

Answer 1

谢谢大家我想复杂了,贴上代码:
<gmap-marker v-for="(item,index) in positions" :key='index'
:position="{lat:Number(item.lat),lng:Number(item.lon)}">
</gmap-marker>
positions: [],
this.position.forEach(ele => {
this.positions.push({lat: ele.lat,lon: ele.lon})
})

Answer 2

[{x: '', y: ''},{x: '', y: ''}]

数据弄成这种格式

let lat = [] //经度数组
let we = [] //纬度数组  lat和we数组长度一样
let newArr = []
for(var i;i<lat.length;i++){
    let item = {}
    item.x = lat[i];
    item.y = we[i];
    newArr.push(item)
}
console.log(newArr)

Answer 3

这样不就好了

  <gmap-marker v-for="(item,index) in positions.lat" :key='index' 

  </gmap-marker>