I've set up a carousel of logos, with the intention to randomize their order every time the page reloads. The challenge is that my layout only allows for 10 images to be displayed at once.
While it seems like everything is functioning correctly, I've encountered an issue: although the original images array is successfully shuffled and a computed value is generated to loop through the newly shuffled images, the desired effect only happens when navigating away from the page and returning. Simply reloading the page results in the same image sequence being displayed.
I've also observed that the original array is being shuffled despite having a specific computed value and property designated 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: [
// Array of logo objects
],
ShuffledLogos: null,
}
},
computed: {
SelectedLogos() {
return this.ShuffledLogos.slice(0, 10)
},
},
created() {
this.ShuffledLogos = this.selectRandomLogo(this.partnersLogos)
},
methods: {
selectRandomLogo(items) {
// Method to shuffle items array randomly
},
},
}
</script>
Despite implementing a method to shuffle the original array (partnersLogos) and storing the shuffled logos in the ShuffledLogos array, which is then utilized to create a computed value and loop through, displaying the randomized images upon each page refresh is proving to be challenging.