Why is the array empty in the template but not in the setup

#1

I am trying to display a list of images and I get the images from the backend as follows:

const postimages = ref({});
const productimages = ref({});
onBeforeMount(async () => {
	let imagesdata = await axios.get(
		"api/v1/posts/user/" + loggedUser + "/posts/images/"
	);
	for (var post of imagesdata.data) {
		if (post.type == "post") {
			postimages.value = post.images;
                       console.log(postimages.value)
		}
		if (post.type == "product") {
			productimages.value = post.image;
		}
	}
});

The console.log statement prints the following:

Proxy { <target>: (4) […], <handler>: {…} }
​
<target>: Array(4) [ {…}, {…}, {…}, … ]
​​
0: Object { id: 43, image: "http://127.0.0.1:8000/storage/posts/45/images/landscape-tree-water-nature-forest-wilderness-1267115-pxhere.com.jpg", created_at: "2022-12-27T06:15:56.022681Z" }
​​
1: Object { id: 42, image: "http://127.0.0.1:8000/storage/posts/45/images/bourkes-potholes-2-kruger-park-big-five-african-travel-desk.jpg", created_at: "2022-12-27T06:15:56.020644Z" }
​​
2: Object { id: 41, image: "http://127.0.0.1:8000/storage/posts/45/images/kilimanjaro.jpg", created_at: "2022-12-27T06:15:56.018705Z" }
​​
3: Object { id: 40, image: "http://127.0.0.1:8000/storage/posts/45/images/Lake-Tahoe-Beauty.jpg", created_at: "2022-12-27T06:15:56.016182Z" }
​​
length: 4
​​
<prototype>: Array []
​
<handler>: Object { get: get(target, key, receiver), set: set(target, key, value, receiver), deleteProperty: deleteProperty(target, key)
, … }
MediaView.vue:148
Proxy { <target>: [], <handler>: {…} }
​
<target>: Array []
​​
length: 0
​​
<prototype>: Array []
​
<handler>: Object { get: get(target, key, receiver), set: set(target, key, value, receiver), deleteProperty: deleteProperty(target, key)
, … }
MediaView.vue:148
Proxy { <target>: [], <handler>: {…} }
​
<target>: Array []
​​
length: 0
​​
<prototype>: Array []
​
<handler>: Object { get: get(target, key, receiver), set: set(target, key, value, receiver), deleteProperty: deleteProperty(target, key), … }

In the template I have the following:

<div class="imagesList flex wrap" v-if="postimages">
	{{ postimages }}
	<div
		class="imageList"
		v-for="(image, id) in postimages"
		:key="id"
	>
		<div class="imageList" v-for="(img, id) in image" :key="id">
			<img :src="img.image" class="listImg" />
		</div>
	</div>
</div>

Why is the {{postimages}} part giving me an empty array and why are none of the images displayed with the v-form loop?

#2

You don’t need a loop here. Get rid of the v-for="(img, id) in image" and access your images as :src="image.image" (based on the first loop).

Also, you shouldn’t use the index (what you’ve declared as id) as the key. Use the images actual id from the data: :key="image.id"

#3

Thanks for the reply but I may have not properly explained it. There are more than one post and images are a sub array of a post. A post can be a product or a normal post. So products for example has a normal image to display the product and then it can also have a gallery. Posts can have one or more images.

The outer v-for is supposed to loop through the posts (or product but they are all labeled as posts) and then the inner v-for is supposed to loop through the list of images of each post.

In the setup I can see the data but in the template I see no data not even the entire array if I try and print that, and that is where my issue lies. Thank you

#4

This is how I fixed it but now I see some gaps and img tags with no src because the post might not have images. How do I exclude the empty images please? The v-if statement image != null is not working for me. Appreciate your help so much

<div class="imagesList flex wrap" v-if="postimages">
	<div
		class="imageList"
		v-for="image in postimages"
		:key="image.id"
	>
		<div class="imageList" v-if="image != null">
			<div
				class="images"
				v-for="img in image.images"
				:key="img.id"
			>
				<img :src="img.image" class="listImg" />
			</div>
		</div>
		<img :src="image.image" class="listImg" />
	</div>
</div>
#5

It really depends on your data model which I’m not privy to. Checking if its truthy should cover you v-if="image" though.

#6

Thanks James much appreciated