Vue3 Composition API下v-for循环无法访问location.drawnfeatures数据问题

1. 首先排查拼写错误 #

你代码中存在两处属性名大小写不一致的问题：

• 模板v-for遍历用的是location.drawnfeatures（全小写）
• v-if判断用的是location.drawnFeatures（驼峰写法）
  请先确认props.locationData.location中返回的要素集合字段的实际命名，模板所有位置统一写法即可解决length未定义的报错。

2. 修正toRef的错误用法 #

你写的const locationData = toRef(props)不符合API规范：

• toRef用于为props的单个属性创建响应式引用，正确写法为const locationData = toRef(props, 'locationData')
• 如果要批量解构props的所有属性为响应式，应该用toRefs，写法为：

const { locationData } = toRefs(props)

按照上述写法修正后即可正常读取locationData.value的值。

3. 修复响应式更新逻辑 #

你当前只在onMounted生命周期触发一次赋值，若props的locationData是异步获取后更新的，onMounted触发时可能还未拿到后端返回的完整数据，导致location不会后续更新，建议用watch监听props变化：

import { ref, watch, toRefs } from 'vue'

props:{
  locationData:Object,
},
setup(props){
  const { locationData } = toRefs(props)
  const location = ref({
    center:[0, 0],
    zoom:5,
    coordinates:null,
    rotation: 0,
    name:null,
    title:null,
    drawnFeatures: [] // 初始化新增字段，避免读取length时报错
  })

  // 监听locationData变化，立即执行一次覆盖初始化逻辑，不需要单独写onMounted
  watch(locationData, (newVal) => {
    if (newVal?.location) {
      location.value = {
        ...location.value,
        ...newVal.location
      }
    }
  }, { immediate: true, deep: true })

  return {
    location
    // 注意：如果你模板里用了uid变量，也要在这里return出去
  }
}

4. 模板优化 #

将v-if判断改为可选链写法，进一步避免属性未定义时的报错：

<ol-feature v-if="location.drawnFeatures?.length" v-for="(feature, index) in location.drawnFeatures" :key="`feature${uid}${index}`">
  <ol-geom-point :coordinates="feature.coordinates"></ol-geom-point>
</ol-feature>

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