JSFiddle - React, Tailwind, and code Playground

by tara5

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.value }}</li>
  </ul>
  <a href="javascript:void(0)" v-on:click="randomise()">Randomize</a>
  
</div>

JavaScript

let app = new Vue({
  el: '#app',
  data: {
    list: [
      { value: 'item 1', id: '43234r' },
      { value: 'item 2', id: '32rsdf' },
      { value: 'item 3', id: 'fdsfsdf' },
      { value: 'item 4', id: 'sdfg543' }
    ]
  },
  methods: {
    randomise: function() {
      let input = this.list.map(function(item) {
      	return item;
      });
     
      for (let i = input.length-1; i >=0; i--) {

          let randomIndex = Math.floor(Math.random()*(i+1)); 
          let itemAtIndex = input[randomIndex]; 

          input[randomIndex] = input[i]; 
          input[i] = itemAtIndex;
      }
      this.list = input;
     
    }
  }
});