如何使用 Vuejs 显示数组列表

Posted 2023-02-22

【中文标题】如何使用 Vuejs 显示数组列表

【英文标题】：How can I display an array list with Vuejs

【发布时间】：2021-12-02 21:44:00

【问题描述】：

您好，我有一个多维数组，我需要将它显示在一个列表中，所以我的数组是这样的：

"rut":["06152617-K"],"full_name":[""],"total_days":[30]

我的看法是这样的：

<tbody>
     <tr v-for="post in posts">
       <td> post.rut[0] </td></td>
     </tr>
</tbody>

如果我添加 [0] 或 [index] 它会显示一个错误，所以我想知道如何显示所有数组值？

因为如果我删除然后我就离开了：

post.rut

它可以工作，但它不显示任何东西

我收到此错误：

Error in render: "TypeError: Cannot read properties of undefined (reading '0')

我该怎么做？

谢谢

【参考方案1】：

试试这个：

 rut:"06152617-K",full_name:"",total_days:30

如果你想访问这些值，你可以像以前一样做：

post.rut

如果您希望继续在对象中包含数组，请尝试在 html 中替换：

<tbody>
   <tr v-for="post in posts">
     <td v-for="(r,index) in post.rut">
        r[index] 
     </td>
   </tr>
</tbody>

以上代码将遍历 rut 数组并创建数组长度的 tds