JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <div>
    <!--
      The key is used to ensure the background transition is applied correctly
      when an entry is removed. It's using an object as a key and it works fine.
    -->
    <ul>
      <li
        v-for="item in items"
        :key="item"    
      >
        {{ item.name }} - <span @click="remove(item)">Remove</span>
      </li>
    </ul>
    <!-- No warning for duplicate keys -->
    <div key="1"></div>
    <div key="1"></div>
    <div key="1"></div>
    <div key="1"></div>
  </div>
</div>

CSS

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  border: 1px solid blue;
}

li {
  padding: 10px;
  background: #eee;
  transition: background 1s;
}

li + li {
  border-top: 1px solid blue;
}

span {
  color: red;
  cursor: pointer;
  transition: background 1s;
}

li:hover {
  background: #090;
}

span:hover {
  background: #000;
}

JavaScript

Vue.createApp({
  data () {
    return {
      items: [
        { name: 'Red' },
        { name: 'Green' },
        { name: 'Yellow' },
        { name: 'Green' },
        { name: 'Red' },
        { name: 'Blue' }
      ]
    }
  },
  
  methods: {
    remove (item) {
      this.items = this.items.filter(i => i !== item)
    }
  }
}).mount('#app')