title: Vue.js proper random ordering of v-for loop
body: <p>Have a list that i want to output in random order.</p>
  
  <p>I achieved this with computed property:</p>
  
  <pre><code>&lt;div id="app"&gt;
  
    &lt;ul&gt;
      &lt;li v-for="list in randomList" &gt;
        {{ list.text }}
      &lt;/li&gt;
    &lt;/ul&gt;
  
  &lt;/div&gt; 
  
  &lt;script&gt;
        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()});
          }
        }
  
      });
   &lt;/script&gt;
  </code></pre>
  
  <p><strong>But if i have more than one list i that want to simplify this process by applying methods or filters?</strong></p>
  
  <p><strong>I tried with methods without success:</strong></p>
  
  <pre><code>&lt;div id="app"&gt;
  
    &lt;ul&gt;
      &lt;li v-for="list in randomList(lists)" &gt;
        {{ list.text }}
      &lt;/li&gt;
    &lt;/ul&gt;
     &lt;ul&gt;
       &lt;li v-for="name in randomList(names)" &gt;
       {{ name.text }}
      &lt;/li&gt;
    &lt;/ul&gt;
  
  
  &lt;/div&gt; 
  &lt;script&gt;
        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()});
          }
        }
  
      });
   &lt;/script&gt;
  </code></pre>