如何访问Vue 3中数组支柱项中的属性
我正在用Laravel 9、惯性和Vue 3开发一个项目。当我向带有惰性的Vue页面提供数据库记录集时，这些值作为一个支柱，一个代理对象数组，我可以检查.length是否大于零，我可以检查.every(i => i !== undefined)是否大于.every(i => i !== undefined)，但是当我在上迭代时，它会在控制台上抛出一个没有希望的异常。
The ProfessionalsController.php
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$professionals = Professional::all();
return Inertia::render('Professionals/Index', ['professionals' => $professionals]);
}专业/指标
<script setup>
import { Head } from '@inertiajs/inertia-vue3';
import { watch } from '@vue/runtime-core';
const props = defineProps({professionals: Array});
console.log(props.professionals, props.professionals.length, props.professionals[0].id);
</script>
<template>
<Head title="Médicos" />
<template v-if="professionals.length > 0 && professionals.every(i => !! i)">
<ul >
<li for="(index, professional) in professionals" :key="index">
Nome: {{ professional.name }}<br>
CRM: {{ professional.crm }}<br>
</li>
</ul>
</template>
</template>这里，数据来了。脚本中的console.log打印它。
Proxy {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…}, 6: {…}, 7: {…}, 8: {…}, 9: {…}}
[[Handler]]: Object
[[Target]]: Array(10)
0: {id: 1, name: 'Carol Roque', crm: 'WN85149439', phone: '98775-0784', created_at: '2022-05-08T03:51:34.000000Z', …}
1: {id: 2, name: 'Diego Duarte Filho', crm: 'RU07697438', phone: '96712-3272', created_at: '2022-05-08T03:51:34.000000Z', …}
2: {id: 3, name: 'Dr. Ricardo Carrara Fidalgo', crm: 'CM55958226', phone: '97367-5229', created_at: '2022-05-08T03:51:34.000000Z', …}
3: {id: 4, name: 'Sr. Jorge Jean Romero', crm: 'NF71422476', phone: '93156-1833', created_at: '2022-05-08T03:51:34.000000Z', …}
4: {id: 5, name: 'Marta Galindo', crm: 'IB95085501', phone: '3048-2031', created_at: '2022-05-08T03:51:34.000000Z', …}
5: {id: 6, name: 'Dr. Lidiane Lia Ferraz', crm: 'PX86614139', phone: '2854-6792', created_at: '2022-05-10T03:53:15.000000Z', …}
6: {id: 7, name: 'Adriano Ícaro Ferminiano Neto', crm: 'KQ93046167', phone: '95618-8435', created_at: '2022-05-10T03:53:15.000000Z', …}
7: {id: 8, name: 'Dr. Erik Bittencourt', crm: 'YB92798968', phone: '90151-4721', created_at: '2022-05-10T03:53:15.000000Z', …}
8: {id: 9, name: 'Dr. Dayana Ortega Batista Neto', crm: 'RU93839397', phone: '91844-2628', created_at: '2022-05-10T03:53:15.000000Z', …}
9: {id: 10, name: 'Stefany de Aguiar', crm: 'UX32957687', phone: '99495-4536', created_at: '2022-05-10T03:53:15.000000Z', …}
length: 10
[[Prototype]]: Array(0)
[[IsRevoked]]: false但是，当涉及到模板的时，项目是未定义的。
app.js:23938 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')我甚至在li标签中放置了一个concole.log(professional)，它只打印未定义的
我猜想，虽然professionals道具是反应性的，但它的项目却不是。但我找不到任何关于这件事的确切情况，也无法纠正这种行为。已试过
在v-for directive
- pass asyncData
- extract prop.professional中，将
- 转换为options api
- 包装专业人员到数据状态，使用ref和asyncData
- extract将来自代理的数组使用值()方法
回答 1
Stack Overflow用户
发布于 2022-05-10 15:12:48
正如Michal所提到的，我没有使用正确的Vue指令v-for，而是使用了一个for。
此外，我将索引的别名与试图访问的对象的别名放在一起：
在此之前
<template v-if="professionals.length > 0 && professionals.every(i => !! i)">
<ul >
<li for="(index, professional) in professionals" :key="index">
Nome: {{ professional.name }}<br>
CRM: {{ professional.crm }}<br>
</li>
</ul>
</template>之后
<template v-if="professionals.length > 0 && professionals.every(i => !! i)">
<ul >
<li v-for="(professional, index) in professionals" :key="index">
Nome: {{ professional.name }}<br>
CRM: {{ professional.crm }}<br>
</li>
</ul>
</template>(实际上，我使用professional.id作为关键指令，但为了澄清，别名的顺序也是错误的)
https://stackoverflow.com/questions/72188461
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号