JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <button @click="items.unshift({ id: Math.random() })">
    Add to start
  </button>
  <button @click="items.push({ id: Math.random() })">
    Add to end
  </button>
  Filter: <input v-model="text">
  <child-1 :items="items" :text="text"></child-1>
</div>

CSS

.border {
  border: 1px solid blue;
}

p {
  background: #ccc;
}

JavaScript

const SlowLoad = {
  template: `
    <p>
      {{ value }}
    </p>
  `,
  
  data () {
    return {
      value: 'Loading'
    }
  },
  
  props: ['id'],
  
  watch: {
    id: {
      immediate: true,
      
      handler () {
        this.value = 'Loading ' + this.id

        setTimeout(() => {
          this.value = this.id + ' is loaded'
        }, 2000)
      }
    }
  }
}

const Child1 = {
  template: `
    <div class="border">
      <template v-for="item in items">
        <keep-alive :key="item.id">
          <slow-load :key="item.id" :id="item.id" v-if="String(item.id).includes(text)" />
        </keep-alive>
      </template>
    </div>
  `,
  
  components: { SlowLoad },
  
  props: ['items', 'text']
}

new Vue({
  components: {
    Child1
  },

  data () {
    return {
      text: '',
    
      items: [
        { id: 1 },
        { id: 2 },
        { id: 3 },
        { id: 4 },
        { id: 5 }
      ]
    }
  }
}).$mount('#app')