I need help targeting specific elements using the ref attribute in Vuejs to randomize their order every time the page loads.
The data is displayed in the template and managed in the component:
<div class="team" >
<div class="team__card" ref="card" v-for="(member, index) in team"
:key="index">
<div v-for="(image, imageIndex) in member.image" :key="imageIndex">
<img :src="image" alt="Photo of team member" :key="imageIndex" />
</div>
<div class="team__card-content">
<p class="font-bold text-xl">{{ member.name }}</p>
<p class="font-bold text-gray-700">{{ member.title }}</p>
<p class="text-gray-700">{{ member.description }}</p>
</div>
</div>
</div>
<script>
export default {
name: 'Page Name',
data() {
return {
team: [
{
image: [require('url')],
name: 'Name',
title: 'Title',
description:'description.'
},
{
image: [require('url')],
name: 'Name',
title: 'Title',
description:'description.'
},
]
}
},
created() {
this.randomize()
},
methods: {
randomize() {
for (let i = this.team.length - 1; i > 0; i--) {
let randomIndex = Math.floor(Math.random() * i)
let temp = this.team[i]
this.set(this.team, i, this.team[randomIndex])
this.set(this.team, randomIndex, temp)
}
}
}
}
</script>
Can anyone provide some insight on how to shuffle/randomize the order of my card elements on each page load? Thanks in advance!