Nuxt: Shuffle Array of Images everytime page is reload to Show different Logos in Carousel

Question

I have a carousel of logos and I want to shuffle all the images on that array everytime I reload the page so the carousel show the images on a different order every new reload besides that my layout only allow 10 images to show at the same time.

Apparently everything is working fine. I'm shuffling the original images array and then creating a computed value to do a for loop to show the new shuffled images, the thing is that even when this is working fine in PRE in PRO is just working if I navigate the page and then come back to where there carousel is, if I just reload the page it will keep showing the same images.

I also noticed that for some reason the app is also shuffling the original array when I have an specific computed value and property to store the new sorted array.

<template>
  <div class="site-section--partners__images" role="list">
    <div
      v-for="(logo, index) in SelectedLogos"
      :key="index"
      class="site-section--partners__logo"
      role="listitem"
    >
      <a :href="logo.url" target="_blank">
        <img
          class="site-section--partners__image"
          :src="logo.image"
          :alt="logo.alt"
          :title="logo.alt"
        />
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      partnersLogos: [
        {
          id: 1,
          image: '/images/partners/wildz.svg',
          url: 'http://www.xcc.com',
          alt: 'Wildz',
        },
        {
          id: 2,
          image: '/images/partners/caxino.svg',
          url: 'http://www.xcc.com',
          alt: 'Caxino',
        },
        {
          id: 3,
          image: '/images/partners/wheelz.svg',
          url: 'https://www.xcc.com/en/',
          alt: 'Wheelz',
        },
        {
          id: 4,
          image: '/images/partners/koi.svg',
          url: 'https://www.xcc.com/',
          alt: 'Koi',
        },
        {
          id: 5,
          image: '/images/partners/maximbet-logo.svg',
          url: 'https://xc.com/',
          alt: 'Maximbet',
        },
        {
          id: 6,
          image: '/images/partners/superseven.svg',
          url: 'http://www.xcc.com/',
          alt: 'SuperSeven',
        },
        {
          id: 7,
          image: '/images/partners/carousel-group.svg',
          url: 'https://www.xcc.net/',
          alt: 'Carousel Group',
        },
        {
          id: 8,
          image: '/images/partners/pocketplay.svg',
          url: 'https://xcc.com/',
          alt: 'Pocket Play',
        },
        {
          id: 9,
          image: '/images/partners/gig.svg',
          url: 'https://www.xcc.com/',
          alt: 'Gig',
        },
        {
          id: 10,
          image: '/images/partners/bollybet.svg',
          url: 'https://www.xcc.com/',
          alt: 'Bollybet',
        },
        {
          id: 11,
          image: '/images/partners/boomBangVip.svg',
          url: 'https://www.xcc.vip/',
          alt: 'Boom Bang VIP',
        },
        {
          id: 12,
          image: '/images/partners/casibee.svg',
          url: 'https://www.xcc.com/',
          alt: 'CasiBee',
        },
        {
          id: 13,
          image: '/images/partners/jackpot.svg',
          url: 'http://www.xcc.com',
          alt: 'Jackpot Guru',
        },
      ],
      ShuffledLogos: null,
    }
  },
  computed: {
    SelectedLogos() {
      return this.ShuffledLogos.slice(0, 10)
    },
  },
  created() {
    this.ShuffledLogos = this.selectRandomLogo(this.partnersLogos)
  },
  methods: {
    selectRandomLogo(items) {
      for (let i = items.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1))
        ;[items[i], items[j]] = [items[j], items[i]]
      }
      return items
    },
  },
}
</script>

As you can see I have a method to shuffle the images in the original array (partnersLogos) and then store them in the ShuffledLogos array and then I use that ShuffleLogos array to create a computed value and loop through it to show the images shuffled everytime I refresh the page, but that's not working.

Answer 1

@ErsinDemirtas answer in the comments was the way to go so I'll just copy paste his comment here since he deserves all the credit:

Its probably because of the your build. Looks like the computed property is only executed once and deployed as static. So you should check if SSR is enabled on your production. This means the computed data is only computed once and if you refresh you will always get the same result. What you want is to run the shuffle only on client side. Personally I would this component into a client-only here is more information on that. nuxtjs.org/docs/features/nuxt-components/…