JSFiddle - React, Tailwind, and code Playground

by John Passmore

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="app">
<p v-for >
  <p v-for="(item, index) in anArray">
    <span v-text="item + ' index'"></span>
    <a href="#" v-on:click.prevent="deleteArray(index)">&times;</a>
  </p>
 <p v-for="(item, index) in items">
    <span "id: " v-text="item.id" v-text="item.title"></span>
    <a href="#" v-on:click.prevent="deleteObject(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);
    }
  }
});