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

Question

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>

Answer 1

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}" />