Vue 3组合Api：V-For循环不访问数据答案

【问题标题】：Vue 3 composition Api: V-For loop not accessing dataVue 3组合Api：V-For循环不访问数据
【发布时间】：2021-09-06 16:30:44
【问题描述】：

我有这个模板

我的问题是模板中的location.drawnfeatures 由于某种原因没有更新我可以看到我从 console.log 获得了正确的数据，并且我在没有 'v-for' 的情况下进行了测试，并且代码有效

如果我输入v-if="location.drawnFeatures.length"，我会收到错误消息说长度未定义..

我尝试在任何地方添加.value

为什么 vue3 不访问数据？

<ol-feature v-for="(feature, index) in location.drawnfeatures" :key="'feature'+uid+index">
  <ol-geom-point :coordinates="feature.coordinates"></ol-geom-point>

位置定义如下：

props:{
 locationData:Object,
},
setup(props){
  const location = ref({
    center:[0, 0],
    zoom:5,
    coordinates:null,
    rotation: 0,
    name:null,
    title:null,
  })

 onMounted(() => {
  location.value = props.locationData && props.locationData.location ? props.locationData.location : location.value
  console.log(location.value)
 });
}

我也尝试在setup() 中声明 prop

const locationData = toRef(props)

如果我这样做 console.log(locationData.value) 我得到未定义

但这也不起作用

【问题讨论】：

这可能是因为它没有在您的参考文献中初始定义。我猜drawnfeatures 来自您传递并重新分配给裁判的道具？尝试在您的参考文献中声明为空数组。
我不确定你的意思，我在我的问题中添加了道具部分。
我也只看到了访问location.drawnfeatures 的代码，但我没有看到定义location.drawnfeatures 属性的代码。
locationData prop 的值从何而来？异步 Ajax 调用可能吗？顺便说一句，将对象记录到浏览器控制台不起作用as you might expect
location.drawnfeatures 不是道具，locationData 是

标签： vue.js vuejs3

【解决方案1】：

如果你对通过 props 获得的对象进行解构，解构后的值将失去反应性：

https://v3.vuejs.org/guide/composition-api-setup.html#props

但是，因为 props 是反应性的，所以不能使用 ES6 解构，因为它会移除 props 的反应性。

似乎使用location.value = props.locationData.location，您正在从道具访问嵌套对象值，并且它不保持反应性。

根据代码，应该可以直接在 for 循环中使用 locationData 属性：

<ol-feature v-for="(feature, index) in locationData.location.drawnfeatures" :key="'feature'+uid+index">

您还可以在道具中设置默认对象，您可能不需要在设置中定义位置。

props: {
 locationData: {
  type: Object,
  default() {
   return {
    location: {
     center: [0, 0],
     zoom: 5,
     coordinates: null,
     rotation: 0,
     name: null,
     title: null,
    }
   }
  }
 }
}

【讨论】：

我尝试在我的问题中添加的设置中创建道具；我还尝试创建一个新道具并直接访问它，但它不起作用；模板未更新
这个问题似乎有点令人困惑，因为它在一开始说使用 console.log 可以看到数据是正确的，但后来在问题中使用 console.log(locationData.value) 给出返回未定义。如果它是未定义的 v-for 当然不会工作。数据在代码中的哪一点应存在？您能否提供一个示例对象？（如果有任何非常长的数组，那么可能是一个缩写样本）

【解决方案2】：

我不知道为什么，但这有效：我不得不直接停止使用道具并解构location

首先我必须在两个地方声明（不要问我为什么）

props:{
  locationData:Object,
},
setup(props, context) {
  const locationData = toRef(props)

在mounted 我做了类似的事情：

  if(props.locationData.location) {
    if(props.locationData.location.drawnFeatures) {
      locationFeatures.value = props.locationData.location.drawnFeatures
    }
    if(props.locationData.location.zoom) {
      zoom.value = props.locationData.location.zoom
    }

然后将属性位置转换为方法：

const location = () =>  { 
 return {
  center:center,
  drawnFeatures:drawnFeatures
}}

并修改了模板

 <ol-feature v-for="(feature, index) in locationFeatures" :key="'feature'+uid+index">
    <ol-geom-point :coordinates="feature.coordinates"></ol-geom-point>

【讨论】：