JSFiddle - React, Tailwind, and code Playground

by Jacob Goh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
  <select v-model="selectValue" id="select">
    <option value="alpha">Alpha</option>
    <option value="beta">Beta</option>
  </select> select value is: {{selectValue}}
  <br><br>
  
  <input type="checkbox" id="checkbox" v-model="checkboxValue" > checkbox checked is: {{checkboxValue}}
  <br> <br>
  
  <input type="text" id="text" v-model="textValue"> text value is: {{textValue}}
  <br><br>
  
</div>

  <!-- totally unrelated to Vue! -->
  <button onclick="vueApp.selectValue = vueApp.selectValue === 'alpha' ? 'beta' : 'alpha' " >
   change select
  </button>
    <button onclick="vueApp.checkboxValue = !vueApp.checkboxValue" >
   change checkbox
  </button>
  <button onclick="vueApp.textValue = Math.random()">
  change input
  </button>

JavaScript

window.vueApp = new Vue({
  el: "#app",
  data: {
    selectValue: 'alpha',
    checkboxValue: true,
    textValue: 'type something..',
    eventListenerValue: ''
  }
});

setInterval(function(){
	console.log(vueApp.selectValue,vueApp.checkboxValue,vueApp.textValue)
},1000)