Vue input vs change

Not all inputs react to input fields. I left aside textareas and content editable

by superj80820

HTML

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

<div id="app">
  <input type="text" @input="addEvent" @change="addEvent" />
  <input type="range" min="0" max="100" @input="addEvent" @change="addEvent" />
  <input type="checkbox" @input="addEvent" @change="addEvent" />
  <input type="radio" name="radio" value="1" @input="addEvent"  @change="addEvent" />
  <input type="radio" name="radio" value="2" @input="addEvent"  @change="addEvent" />
  <select @input="addEvent" @change="addEvent">
  <option value="1">1</option>
  <option value="2">2</option>
  </select>
  <ul>
    <li v-for="event in events">{{ eventText(event) }}</li>
  </ul>
</div>

Babel + JSX

new Vue({
  el: '#app',
  data: {
  	events: []
  },
  methods: {
  	addEvent ({ type, target }) {
      const event = {
          type,
          isCheckbox: target.type === 'checkbox',
          target: {
            value: target.value,
            checked: target.checked
          }
      }
    	this.events.push(event)
    },
    eventText (e) {
    	return `${e.type}: ${e.isCheckbox ? e.target.checked : e.target.value}`
		}
  }
})