Looking to display a list in random order?
You can achieve this with a computed property:
<div id="app">
<ul>
<li v-for="item in shuffledList" >
{{ item.text }}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
items:[
{text:'js',value:'one'},
{text:'css',value:'two'},
{text:'html',value:'three'}
]
},
computed: {
shuffledList: function(){
return this.items.sort(function(){return 0.5 - Math.random()});
}
}
});
</script>
If you have multiple lists and want to simplify the process, consider using methods or filters.
Attempting with methods:
<div id="app">
<ul>
<li v-for="item in shuffleList(items)" >
{{ item.text }}
</li>
</ul>
<ul>
<li v-for="person in shuffleList(people)" >
{{ person.text }}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
items:[
{text:'js',value:'one'},
{text:'css',value:'two'},
{text:'html',value:'three'}
],
people:[
{text:'mary',value:'one'},
{text:'css',value:'two'},
{text:'html',value:'three'}
]
},
methods: {
shuffleList: function(list){
return list.sort(function(){return 0.5 - Math.random()});
}
}
});
</script>