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

[{x:&nbsp;'',&nbsp;y:&nbsp;''},{x:&nbsp;'',&nbsp;y:&nbsp;''}]数据弄成这种格式let&nbsp;lat&nbsp;=&nbsp;[]&nbsp;//经度数组let&nbsp; we&nbsp;=&nbsp;[]&nbsp;//纬度数组&nbsp;&nbsp;lat和we数组长度一样 let&nbsp;newArr&nbsp;=&nbsp;[] for(var&nbsp;i;i<lat.length;i++){ &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;item&nbsp;=&nbsp;{} &nbsp;&nbsp;&nbsp;&nbsp;item.x&nbsp;=&nbsp;lat[i]; &nbsp;&nbsp;&nbsp;&nbsp;item.y&nbsp;=&nbsp;we[i];&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;newArr.push(item) } console.log(newArr)