JSFiddle - React, Tailwind, and code Playground

by enriqg9

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <button @click="createAlert">
    Create Alert
  </button>
  <alert v-for="(alert, index) in alerts" @expired="removeItem(index)">{{ alert }}</alert>
</div>

JavaScript

Vue.component('alert', {
  template: '<li><slot></slot></li>',
  mounted() {
    setTimeout(() => this.$emit('expired'), 2000)
  }
});

new Vue({
  el: '#app',
  data: {
    count: 0,
    alerts: []
  },
  methods: {
  		createAlert(){
      	this.alerts.push(this.count++)
      },
      removeItem(index) {
        this.alerts.splice(index, 1)
      }
  }
});