JSFiddle - React, Tailwind, and code Playground

by bpmania

HTML

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

<div id="app">
  <input type="text" v-model="searchQuery">
  
  <p v-if="isSearching">Searching...</p>
  <div v-else>
    <ol>
      <li v-for="result in results">{{ result }}</li>
    </ol>
  </div>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
    searchQuery: '',
    results: [],
    isSearching: false
  },
  watch: {
  	searchQuery: function(query) {
      this.isSearching = true;
      var vm = this;
      
      setTimeout(function() {
      	vm.results = ['JavaScript', 'PHP', 'MySQL'];
				vm.isSearching = false;
      }, 500);
    }
  }
});