PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, October 13, 2022

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

 October 13, 2022     arrays, axios, v-for, vue.js     No comments   

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)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing