JSFiddle - React, Tailwind, and code Playground

by charliebratches

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.3/vue.min.js"></script>
<div id="app">
  <div class="gen-field" @mouseover="mouseOver">
  {{message}}
  </div>
  <button v-on:click="genField">
  go
  </button>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
  	shruggie: '¯\\_(ツ)_/¯',
  	size: 64,
  	availableCharacters: "01",
    message: 'Hello Vue!',
    field: '',
    activeMouse: false
  },
  methods: {
  	gen(){
    	
    },
    randomIntInRange(max, min){
    	return Math.floor(Math.random() * (max - min) ) + min;
    },
    pickRandom(){
    	return this.availableCharacters[this.randomIntInRange(0, this.availableCharacters.length)];
    },
    genField(event){
    	var computedField = '';
			for(i=0; i<this.size; i++){computedField+=this.pickRandom();}
      this.message = computedField;
    },
    startInterval(){
    	alert(this.shruggie)
    	var self = this
    	setInterval(function () {
    		this.genField();
    	}, 3000)
    },
    test(){
    	alert(this.shruggie);
    },
    mouseOver: function(){
      this.activeMouse = !this.activeMouse;   
    }
  },
  computed: {
    computeField(){
    	var computedField = '';
			for(i=0; i<this.size; i++){computedField+=this.pickRandom();}
      return computedField;
    }
  },
  watch:{
  	activeMouse: function () {
    	while(this.activeMouse){
      }
    }
  }
})