JSFiddle - React, Tailwind, and code Playground

by Bo Andersen

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="n in numbers">{{ n }}</li>
  </ul>
  
  <button v-on:click="addNewNumber()">Add Number</button>
  <button v-on:click="shuffleNumbers()">Shuffle Numbers</button>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	numbers: [1, 2, 3, 4, 5]
  },
  methods: {
  	addNewNumber: function() {
    	var highestNumber = Math.max.apply(Math, this.numbers);
      this.numbers.push(highestNumber + 1);
    },
    shuffleNumbers: function() {
    	this.numbers = this.shuffleArray(this.numbers);
    },
    shuffleArray: function (arr) {
    	var newArr = arr.slice();
    
      for (var i = newArr.length - 1; i > 0; i--) {
          var j = Math.floor(Math.random() * (i + 1));
          var temp = newArr[i];
          newArr[i] = newArr[j];
          newArr[j] = temp;
      }
      
      return newArr;
		}
  }
});