如何用Vue.js渲染多维数组列表，解决下标访问报错问题

报错原因 #

• 渲染阶段post.rut尚未完成赋值处于undefined状态，此时直接访问索引[0]就会触发"读取undefined属性"的类型错误，绝大多数是因为posts为异步接口返回数据，渲染时第一轮还没拿到后端返回的完整结构
• 现有代码存在语法冗余：<td>{{ post.rut[0] }}</td></td>多写了一个多余的</td>闭合标签，需先删除

修复方案 #

方案1：单个数组元素展示（取每个字段数组的第一个值） #

如果是Vue3支持ES2020+语法，直接用可选链+空值合并兜底：

<tbody>
     <tr v-for="(post, index) in posts" :key="index">
       <td>{{ post.rut?.[0] ?? '' }}</td>
       <td>{{ post.full_name?.[0] ?? '' }}</td>
       <td>{{ post.total_days?.[0] ?? '' }}</td>
     </tr>
</tbody>

如果是Vue2不支持可选链，改用逻辑与兜底：

<tbody>
     <tr v-for="(post, index) in posts" :key="index">
       <td>{{ post.rut && post.rut[0] || '' }}</td>
       <td>{{ post.full_name && post.full_name[0] || '' }}</td>
       <td>{{ post.total_days && post.total_days[0] || '' }}</td>
     </tr>
</tbody>

方案2：全数组元素展示（字段数组存在多个值的场景） #

嵌套一层v-for遍历对应字段的数组内容即可：

<tbody>
     <tr v-for="(post, postIndex) in posts" :key="postIndex">
       <td>
         <span v-for="(rutItem, rutIndex) in post.rut || []" :key="rutIndex">
           {{ rutItem }}
         </span>
       </td>
       <td>
         <span v-for="(nameItem, nameIndex) in post.full_name || []" :key="nameIndex">
           {{ nameItem }}
         </span>
       </td>
       <td>
         <span v-for="(dayItem, dayIndex) in post.total_days || []" :key="dayIndex">
           {{ dayItem }}
         </span>
       </td>
     </tr>
</tbody>

额外优化建议 #

给posts设置符合结构的初始值，比如初始赋值为[{rut: [], full_name: [], total_days: []}]，可从根源避免初始渲染时属性不存在的问题。

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