JSFiddle - React, Tailwind, and code Playground

by lmk123

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <ul>
    <li v-for="(p, index) in persons" v-bind:key="index">{{ p.name }} (ID: {{ p.id }}) <input type="text"></li>
  </ul>

  <button v-on:click="shuffle()">Shuffle</button>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	persons: [
	    { id: 1, name: 'Andy' },
      { id: 2, name: 'Abby' },
      { id: 3, name: 'Teresa' },
      { id: 4, name: 'John' }
    ]
  },
  methods: {
    shuffle: function() {
    	this.persons = _.shuffle(this.persons);
    }
  }
});