JSFiddle - React, Tailwind, and code Playground

by Soviut

HTML

<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<div id="app">
  <div>
    <div v-for="(fruit, i) in fruits" :key="i">
      {{ i }} - {{ fruit }}
      <button @click="removeFruit(i)">
        remove
      </button>
    </div>
    <div v-for="(veg, i) in vegetables" :key="i">
      {{ i }} - {{ veg }}
      <button @click="removeVeg(i)">
        remove
      </button>
    </div>
  </div>
</div>

CSS

body { padding: 1rem; }

JavaScript

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        fruits: ['apple', 'pear', 'grapes'],
        vegetables: ['brocoli', 'squash']
      }
    },
    
    methods: {
      removeFruit(i) {
        this.fruits.splice(i, 1)
      },
      removeVeg(i) {
        this.vegetables.splice(i, 1)
      }
    }
  })
}