Question

如何在 Vue 3 中从数组 prop 的 item 访问属性

2022-05-10

1140

asynchronous vuejs3 inertiajs vue-props vue-reactivity

我正在使用 Laravel 9、 Inertia 和 Vue 3 开发一个项目。当我使用 Inertia 将数据库中的记录集合提供给 Vue 页面时，这些值作为一个 prop 出现，即一个代理 对象数组 ，我可以检查 .length 是否大于零，我可以检查 .every(i => i !== undefined) ，但是 当我对它进行迭代 时，它会在控制台上抛出一个未捕获的承诺异常。

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

Professional/Index.vue

<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 prop 是响应式的，但它的项目不是。但我找不到任何关于它的具体信息，也没有办法纠正这种行为。 已尝试 ：

更改为选项 api
在 v-for 指令中将 professionals 包装在 async/await 箭头函数中
使用 ref 和 asyncData 将 prop.professional 传递给数据状态
使用 value() 方法从 Proxy 中提取数组

Answer 1

正如 Michal Levý 所提到的，我没有使用正确的 Vue 指令 v-for ，而只使用了 for 。

另外，我把索引的别名和我想访问的对象放错了位置：

before

<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>

after

<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 作为关键指令，但需要澄清的是，别名的顺序也是错误的）