JSFiddle - React, Tailwind, and code Playground

by Eduardo San Martin Morote

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<body>
  <div id="search">
    <input v-model="query" type="text" @compositionend="log" @blur="updateQuery">
    <button @click="onClickSearch"> SEARCH </button>
    <ul>
      <li v-for="e in events">{{ e }}</li>
    </ul>
  </div>

</body>

Babel + JSX

var vm = new Vue({
  el: '#search',
  data: {
    query: 'test',
    events: []
  },
  methods: {
    log(e) {
        this.events.push(e ? e.target.value : this.query)
      },
      updateQuery(e) {
        this.query = e.target.value
      },
      onClickSearch() {
        this.log()
      },
  }
});