无法读取未定义的 Vue js 的属性“值”

Question

我有对象数组：

我想从数组中的数组中获取属性：

我使用 v-for 遍历“出版物”数组：

<tbody v-for="elem in cart.publication">
      <th scope="row">1</th>
      <td><a href="#" class="text-danger"><i class="ri-delete-bin-3-line"></i></a></td>
      <td><img :src="elem.images[0].url" class="img-fluid" width="35" alt="product"></td>
</tbody>

但我收到错误消息：vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read property 'url' of undefined

Answer 1

您可以使用安全导航运算符 (?.) 编写计算属性

computed: {
 imageUrls() {
   return this.cart.publication?.map(pub => pub.images?.[0]?.url) ?? [];
 }
}

...

<tbody v-for="url in imageUrls">
  <th scope="row">1</th>
  <td><a href="#" class="text-danger"><i class="ri-delete-bin-3-line"></i></a></td>
  <td><img :src="url" class="img-fluid" width="35" alt="product"></td>
</tbody>