How to use condition with Vuejs with array and v-for? - arrays

Question

I have an array file load with Axios, the problem is in this have an array that has image and video and I can't change it, I want to just the array that has only image, can someone please help to do that, thank you~
{
"data": [
{
"id": "01",
"media_type": "IMAGE",
"media_url": "https://...",
},
{
"id": "02",
"media_type": "VIDEO",
"media_url": "https://...",
},
{
"id": "02",
"media_type": "IMAGE",
"media_url": "https://...",
},
...
]
}
<div class="xx" v-for="event in events.data.slice(0, 6)" v-if="event.media_type == 'IMAGE'">
<img :src="event.media_url" :alt="event.caption">
</div>
data() {
return {
insta: "gram",
events: []
}
},
created() {
axios
.get('https:...')
.then(response => {
this.events = response.data
})
.catch(error => {
console.log('There is an error: ' + error.response)
})
},

Answer 1

You shouldn't really be mixing v-for and v-if directives, because they are confusing, officially discouraged both in Vue2 and Vue3, and most importantly, they have different precedence in Vue2 vs Vue3.
If you want to work off a filtered array (in this case, you want images only), then create a computed prop that is based off the original data. From your code it is not clear if you want to perform which operation first:
Getting the first 6 entries
Getting only images
Let's say you want to get all images, and then return the first 6 images, then this will work:
computed: {
filteredEvents() {
return this.events.data.filter(d => d.media_type === 'IMAGE').slice(0,6);
}
}
If you want to get any 6 first entries and then filter them by image, then simply switch the chaining around:
computed: {
filteredEvents() {
return this.events.data.slice(0,6).filter(d => d.media_type === 'IMAGE');
}
}
Then you can use this in your template:
<div class="xx" v-for="event in filteredEvents">
<img :src="event.media_url" :alt="event.caption">
</div>