Get the first element of an array of objects

#1

I have this for loop to get all the images of a post but I only want to show the first image not all of them. How do I go about doing that please:
This gives me post.images is undefined:

<tr v-for="(post, id) in posts" :key="id">
	<div class="postBody">
		{{ post.body }}
	</div>
	<div class="postImages flex">
		<div
			class="postImage"
			v-for="(img, id) in post.images.slice(0,1)"
			:key="id"
		>
			<img class="postImg" :src="img.image" />
		</div>
	</div>
</tr>
#2

You could use the slice method to only show the first image in the loop, like so:


<tr v-for="(post, id) in posts" :key="id">
	<div class="postBody">
		{{ post.body }}
	</div>
	<div class="postImages flex">
		<div class="postImage" v-if="post.images && post.images.length > 0">
			<img class="postImg" :src="post.images[0].image" />
		</div>
	</div>
</tr>

This will only display the first image in the post.images array, and also adding a condition to check if post.images exist and if it has at least one element.

#3

It doesn’t make sense (or is efficient) to continuously loop over an array to select a single image.

Use a computed property to cache the result. Better yet, create a component such as Post which accepts the post as a prop and within that use a computed property.

#4

Thank you I will follow your advice