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>
  selectValue: {{selectValue}}<br>
  checkboxValue: {{checkboxValue}}<br>
  textValue: {{textValue}}
</div>

  <!-- totally unrelated to Vue! -->
  <button onclick="document.getElementById('select').value= (document.getElementById('select').value === 'alpha' ? 'beta' : 'alpha');document.getElementById('select').dispatchEvent(new Event('change'));" >
   change select
  </button>
    <button onclick="document.getElementById('checkbox').click();" >
   change checkbox
  </button>
  <button onclick="document.getElementById('text').value = Math.random();document.getElementById('text').dispatchEvent(new Event('input'));">
  change input
  </button>

JavaScript

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