[FIXED] How to use condition with Vuejs with array and v-for?

Issue

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)
        })
},

Solution

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>

Answered By - Terry

Answer Checked By - Willingham (PHPFixing Volunteer)