Error in callback for watcher "position.lng"

代码功能没有问题,但当点击标签时,请求完参数会报错

<template>
    
    
  <div class="tou">
    <van-nav-bar
        title="地图找房"
        left-arrow
        @click-left="$router.go(-1)"
    />
    <van-loading color="#1989fa" v-if="isf"/>
    <NewMap
    @cliclabel="newlabel"
    @clichuiwei="huiwei"
    :list="list"
    :where="where"
    :zoom='zoom'
    :postion="postion"
    >NewMap>
  div>
template>
<script>
import NewMap from '@/components/newmap.vue'
import { getmapxy,getcitybdID,getcity } from '@/api/city'
export default {
  components:{
    NewMap
  },
  data(){
    // 先根据本地地名设置地图中心
    return{
      where:getcity(),
      zoom:12,
      list:[],
      isf:true,
      postion:[]
    }
  },
  // 在根据本地code获取一级房源信息,并处理数据将其遍历
  async created(){
    this.isf = true
    const {body} = await getmapxy(getcitybdID())
    this.list = body
    this.isf = false
    this.postion = body.map(item => ({lng:item.coord.longitude, lat:item.coord.latitude}))
  },
  methods:{
    async newlabel(value,sizexy){
      this.isf = true
        console.log(value);
        const {body} = await getmapxy(value)
        console.log(body);
        if(!body[0]) {
          this.$toast('没了')
          this.isf = false
          return
        }
        this.where = sizexy
        this.zoom++
        this.list = body
        this.isf = false
        this.postion = body.map(item => ({lng:item.coord.longitude, lat:item.coord.latitude}))
    },
    async huiwei(){
      this.isf = true
      const {body} = await getmapxy(getcitybdID())
      console.log(body);
      this.list = body
      this.where = getcity()
      this.isf = false
    }
  }
}
script>
<template>
  <baidu-map class="map" :zoom="zoom"  :center="where"> 
    
    <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT">bm-scale>
    
    <bm-navigation
    @click="huiwei"
    anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
    >bm-navigation>
    
    
    
    <bm-label 
    v-for="(item,index) in list" :key="index" 
    :title="item.value"
    :content="item.label+item.count+'套'" 
    :position="postion[index] ? postion[index] : ''" 
    :labelStyle="{color: '#fff', fontSize : '24px',backgroundColor:'rgba(12,181,106,.9)',
      border: '2px solid hsla(0,0%,100%,.8)',
      width: '70px',
      height: '70px',
      borderRadius: '100%',
      lineHeight:'70px',
      textAlign:'center',
      fontSize:'12px'
      }"
    @click="newlabel($event)"
    >
    bm-label>
  baidu-map>
template>

<script>
export default {
  props:{
    list:{
      type:Array,
    },
    where:{
      required:true,
    },
    zoom:{
      type:Number,
    },
    postion:{
      type:Array,
    }
  },
  methods:{
  newlabel(e){
    console.log(e.target.point.lat);
    this.$emit('cliclabel',e.target.z.title,{lng:e.target.point.lng, lat:e.target.point.lat})
  },
  huiwei(){
    console.log(1);
    this.$emit('clichuiwei')
  },
 }
}
script>

img

有想过是生命周期的问题,但不知道从哪下手

希望各位老哥能解决下报错

把这个先改成mock数据试试
const {body} = await getmapxy(value)

问题应该出现在这句代码

img

list和postion没有匹配上,你可以检查下。这里也没必要用postion,还单独写了一个postion存储,直接使用item写:position="{lng:item.coord.longitude, lat:item.coord.latitude})就行