鍍金池/ 問答/HTML/ vue 中v-for怎么遍歷對象中的數(shù)組?

vue 中v-for怎么遍歷對象中的數(shù)組?

問題描述

在地圖開發(fā)中遇到個問題,覆蓋物啥的都有X和Y組成的坐標(biāo)點,拿到后臺數(shù)據(jù)最后解析成2個數(shù)組,想要動態(tài)生成但坐標(biāo)系有兩個值,一個標(biāo)簽只能有一個v-for

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

我嘗試過在外層嵌套個div先遍歷一個div,里面再循環(huán)遍歷一個單這樣貌似變2倍了

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）

<!-- <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);
  })

你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？

我希望能把2個數(shù)組,一個v-for就循環(huán)出來,麻煩了

回答
編輯回答
兮顏

謝謝大家我想復(fù)雜了,貼上代碼:
<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})
})

2018年4月26日 09:01
編輯回答
夏夕

這樣不就好了

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

  </gmap-marker>
2017年2月1日 11:16
編輯回答
別傷我
[{x: '', y: ''},{x: '', y: ''}]

數(shù)據(jù)弄成這種格式

let lat = [] //經(jīng)度數(shù)組
let we = [] //緯度數(shù)組  lat和we數(shù)組長度一樣
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)
2017年1月30日 14:58