Vue.js proper random ordering of v-for loop

Question

Have a list that i want to output in random order.

I achieved this with computed property:

<div id="app">

  <ul>
    <li v-for="list in randomList" >
      {{ list.text }}
    </li>
  </ul>

</div> 

<script>
      var vm = new Vue({


      el:'#app', 
      data:{
        lists:[
          {text:'js',value:'one'},
          {text:'css',value:'two'}, 
          {text:'html',value:'three'}
        ]
      },

      computed: {
        randomList: function(){
          return this.lists.sort(function(){return 0.5 - Math.random()});
        }
      }

    });
 </script>

But if i have more than one list i that want to simplify this process by applying methods or filters?

I tried with methods without success:

<div id="app">

  <ul>
    <li v-for="list in randomList(lists)" >
      {{ list.text }}
    </li>
  </ul>
   <ul>
     <li v-for="name in randomList(names)" >
     {{ name.text }}
    </li>
  </ul>


</div> 
<script>
      var vm = new Vue({


      el:'#app', 
      data:{
        lists:[
          {text:'js',value:'one'},
          {text:'css',value:'two'}, 
          {text:'html',value:'three'}
        ],
        names:[
          {text:'mary',value:'one'},
          {text:'css',value:'two'}, 
          {text:'html',value:'three'}
        ]
      },

      methods: {
        randomList: function(rand){
          return this.rand.sort(function(){return 0.5 - Math.random()});
        }
      }

    });
 </script>

You are getting any error with the method approach? – Saurabh Feb 04 '17 at 12:24 — Saurabh, Feb 04 '17 at 12:24

score 4 · Answer 1 · answered Feb 04 '17 at 12:37

There are few minor errors with your code, One error is in your method: randomList, you are using this.rand where rand is passed as parameter, so you just need to access it via rand, with this.rand it will look into vue instance data and will give following error:

TypeError: this.rand is undefined[Learn More]

See working fiddle here

Code:

  methods: {
    randomList: function(rand){
      return rand.sort(function(){return 0.5 - Math.random()});
    }
  }

You have one typo here: el:'#vapp', => this shoud be el:'#app',

sorry it was a mistake , but anyway thats not working – Roslan Elyashiv Feb 04 '17 at 21:44 — Roslan Elyashiv, Feb 04 '17 at 21:44

score 0 · Answer 2 · edited May 23 '17 at 12:02

The list (array) needs to be randomized using javascript, it has nothing to do with Vue.js or v-for.

Your approach seems correct. I would also create a method to randomize the array items like randomList(myList) and use it directly in v-for.

But instead of using sort function with a random true/false return value, there is a better implementation to shuffle array: How to randomize (shuffle) a JavaScript array?

If you look at the third answer that uses sort() to randomize (similar to your attempt), you will know that it is an incorrect approach. (explained in comments)

The top most answer has the right approach, which you can plug into your randomList() method. Here is how you can do it (similar to the accepted answer in that question, but uses a new array, leaving the original list untouched):

methods: {
    randomList: function(array){
        var currentIndex = array.length;
        var temporaryValue;
        var randomIndex;
        var myRandomizedList;

        // Clone the original array into myRandomizedList (shallow copy of array)
        myRandomizedList = array.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;
    }
}

Please note: I have not tested the above. It is just a copy-paste from the most popular answer, enclosed within your Vue component as a method, after making necessary changes for randomizing the cloned array.

Vue.js proper random ordering of v-for loop

2 Answers2

Linked