Looping some elements randomly in vue js / nuxt js

Question

I get list elements from looping instagramPost, reviewPost, and tlcPost in order:

• Instagram Post1
• Instagram Post2
• Instagram Post3
• Review Post1
• Review Post2
• Review Post3
• Tlc Post1
• Tlc Post2
• Tlc Post3

But I want to show looping these elements randomly such as: Instagram Post1

• Tlc Pos1

• Review Post1

• Instagram Post1

• Tlc Post2

• Review Post2

• Instagram Post3

• Tlc Pos3

• Review Posts3

   <div v-for="instagram in instagramPost" :key="instagram.id">
      <p>{{ instagram.title }}</p>
    </div>
    <div v-for="review in reviewPost" :key="review.id">
      <p>{{ review.title }}</p>
    </div>
    <div v-for="tlc in tlcPost" :key="tlc.id">
      <p>{{ tlc.title }}</p>
    </div>
  

<script>
export default {
async asyncData({$axios}) {
    const instagram  = await $axios.get("/tlc/instagram");
    const review = await $axios.get("/tlc/review");
    const tlcPost = await $axios.get("/tlc/tlc");
    
    return {
      instagramPost: instagram.data
      reviewPost: review.data
      tlcPost: tlcPost.data
    }
  },
data() {
    return {
      instagramPost: {},
      reviewPost: {},
      tlcPost: {}
    };
}
</script>

Answer 1

Assuming all three arrays have same structure you can merge them into single array and then shuffle it e.g

<script>
export default {
async asyncData({$axios}) {
    const instagram  = await $axios.get("/tlc/instagram");
    const review = await $axios.get("/tlc/review");
    const tlcPost = await $axios.get("/tlc/tlc");
    
    return {
      posts: [...instagram.data,...review.data,...tlcPost.data].sort(function(a,b){
        return Math.random() * 2-1;
      });
    }
  },
data() {
    return {
      posts: []
    };
}
</script>

then you can loop on that single array. OR you can shuffle them any way you like as mentioned in this post.

How to randomize (shuffle) a JavaScript array?