I want to get a random v-for template without be the same

Question

I want to get a random value in a v-for loop to make a slideshow of articles. I would like to replace my randomGen computed function into a random post generator without being twice the same. full app : https://jsfiddle.net/z7sfm5tq/ I've already done this :

<div class="article-ran">
  <div class="bloc" v-for="post in randomGen">
    <img v-bind:src="post.img"/>
    <span>{{ post.cat }}</span>
    <p v-bind:href="post.link" target="_blank">
    {{ post.title }}
    </p>
</div>

and my vuejs app


computed: {
  randomGen(){
    Math.floor(Math.random() * this.postList.length);
    this.pickerList = this.postList;
    //so this is the randomGen function that's not working
  }
}
})

A. Put in a method, not computed B. If you don't want identical values then you would need to save them and check against the saved values. — Michael, Jun 23 '20 at 16:06

score 0 · Accepted Answer · answered Jun 24 '20 at 11:17

ok i fix it by myself the code even it's a computed function, inspired by this template : Vue.js proper random ordering of v-for loop

computed: {
    randomList(){
        var currentIndex = this.postList.length;
        var temporaryValue;
        var randomIndex;
        var myRandomizedList;

        // Clone the original array into myRandomizedList (shallow copy of array)
        myRandomizedList = this.postList.slice(0)

        // Randomize elements within the myRandomizedList - the shallow copy of original array
        // While there remain elements to shuffle...
        while (0 !== currentIndex) {

            // Pick a remaining element...
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;

            // And swap it with the current element.
            temporaryValue = myRandomizedList[currentIndex];
            myRandomizedList[currentIndex] = myRandomizedList[randomIndex];
            myRandomizedList[randomIndex] = temporaryValue;
        }

        // Return the new array that has been randomized
        return myRandomizedList;
    }
}

I want to get a random v-for template without be the same

1 Answers1