JSFiddle - React, Tailwind, and code Playground

by James Doyle

HTML

<div id="app">
  <p v-for="(item, index) in items">
    <span v-text="item.title"></span>
    <a href="#" v-on:click.prevent="deleteObject(index)">&times;</a>
  </p>
  <p v-for="(item, index) in anArray">
    <span v-text="item + ' index'"></span>
    <a href="#" v-on:click.prevent="deleteArray(index)">&times;</a>
  </p>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    anArray: ['A','B','C','D'],
    items: {
      '1': {
        id: 1,
        title: 'item 1'
      },
      '2': {
        id: 2,
        title: 'item 2'
      },
      '3': {
        id: 3,
        title: 'item 3'
      },
      '4': {
        id: 4,
        title: 'item 4'
      }
    }
  },
  methods: {
    deleteObject: function(index) {
      this.$delete(this.items, index);
    },
    deleteArray: function(index) {
      this.$delete(this.anArray, index);
    }
  }
});