Vue：src 挂载钩子中的错误：“TypeError：无法读取未定义的属性'0'”答案

【问题标题】：Vue :src Error in mounted hook: "TypeError: Cannot read property '0' of undefined"Vue：src 挂载钩子中的错误：“TypeError：无法读取未定义的属性'0'”
【发布时间】：2021-07-14 03:38:47
【问题描述】：

我在尝试获取图像名称时出错，想知道product.images[0] 给出了一个数组，然后product.images[0]․name 给出了一个错误

<template>
  <div class="container mt-5" v-if="products">
    <div class="row products">
      <div v-for="(product,index) in products" :key="product.id" class="product col-12 mx-auto">
        <div class="product_image">
           <img :src="product.images[0].image" alt="">
        </div>
        <div class="product_info">
          <h4 class="product_title">{{product.name}}</h4>
          <h3 class="product_price">${{product.price}}</h3>
        </div>
      </div>
    </div>
  </div>
</template>

export default {
   data(){
      return {
         name: "Products"
      }
   },
  props:{
     products:Array
  },
  computed:{
     baseUrl(){
       return this.$store.getters.getBaseUrl
     }
  },
}

【问题讨论】：

您能分享您在 products 数组中的所有对象吗？
我看到的第一个问题是图像数组中的图像对象没有'name'属性

标签： vue.js

【解决方案1】：

products 中的至少一个元素可能没有images 属性。您的屏幕截图仅显示第一个元素。

您可以根据product.images 是否存在有条件地呈现<img>：

<div class="product_image" v-if="product.images && product.images.length">
  <img :src="product.images[0].image" alt="">
</div>

【讨论】：