how to fix typeError: cannot read properties of undefined (reading 'upload') in vue

user_19760725 0
Viewed 34

I encountered this error in my program, what is the problem? (The files are correct).

:src="http://marketplus.io/${item.data.upload[0].link}"


  <div class="product-card">
    <div class="product-card-top">
      <NuxtLink :to="`/product/${item.id}`">
        <img v-if="item.data"
          class="w-100"
          :src="`http://marketplus.io/${item.data.upload[0].link}`"   
          alt="product image"
        />
      </NuxtLink>
      <div class="product-card-actions">
        <button class="add-to-wishlist">
          <i class="fas fa-heart"></i>
        </button>
        <button class="add-to-compare">
          <i class="fas fa-random"></i>
        </button>
      </div>
    </div>

nuxt.js vue.js javascript
1 Answers

It looks like the item.data is not available at the first rendering, You should add a conditional rendering in your img element :

<img v-if="item.data" :src="http://marketplus.io/${item.data.upload[0].link}" />
user_81728570
Related