JSFiddle - React, Tailwind, and code Playground

by John Passmore

HTML

<script src="https://unpkg.com/vue"></script>
<h2>Removing an Item from Vue JS data</h2> 
<h1>Removing an Item from Vue JS data</h1> 
<div id="liveApp">
  <div v-for="p in products">
    {{p}}
  </div>
  <p v-for="(product, index) in products"> 
.   <span v-text="product.name"></span> 
    <a href="#" v-on:click.prevent="removeObj(index)">×</a> 
  </p> 
  <p v-for="(product, index) in usernames"> 
    <span v-text="product + ' index'"></span> 
    <a href="#" v-on:click.prevent="removArr(index)">×</a> 
  </p> 
</div>

JavaScript

new Vue({ 
  el: '#liveApp', 
  data: { 
    usernames: ['computer','Krunal','Ramesh','Ankit'], 
    products: { 
      '1': { 
        id: 1, 
        name: 'product 1' 
      }, 
      '2': { 
        id: 2, 
        name: 'product 2' 
      }, 
      '3': { 
        id: 3, 
        name: 'product 3' 
      }, 
      '4': { 
       id: 4, 
        name: 'product 4' 
      } 
    } 
  }, 
  methods: { 
    removeObj: function(index) { 
      this.$delete(this.products, index); 
    }, 
    removArr: function(index) { 
      this.$delete(this.usernames, index); 
    } 
  } 
});