Vue Js Remove Item From Array Example

Vue Js Remove Item From Array Example

Vue js remove element from array example tutorial. In this tutorial, you will learn how to remove/delete elements/items from the array in Vue js.

This tutorial will guide you step by step on how to vue js remove/delete element/item from array in vue js. And as well as, make simple examples of how to vue js remove/delete element/item from array in vue js.

Vue Js Delete Element From Array

This tutorial will show you 2 examples of how to remove or delete items/elements from array in vue js:

Example 1 – VueJS Remove First or Last Element From Array

This example uses the standard pop and shift method to delete/remove first and last element from array in vue js:

<!DOCTYPE html>
<html>
<head>
  <title>Vue Js Remove Element in Array Example - tutsmake.com</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-dark">
  <div class="container">
    <div class="col-md-6 offset-md-3">
      <div class="card mt-5">
        <div class="card-header">
          <h5 v-bind:class="red">Vue Js Remove Element in Array Reactively Example</h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
              <ul>
                <li v-for="item in items" v-text="item.message"></li>
              </ul>
              <button class="btn btn-outline-primary" @click="deleteFirst">
                Delete First
              </button>
              <button class="btn btn-outline-danger" @click="deleteLast">
                Delete Last
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script>
  Vue.config.devtools = true
  var app = new Vue({
    el:'.card-body',
    data:{
      items:[
           { message: 'python' },
           { message: 'C'},
           { message: 'C#'},
           { message: 'Perl'},
           { message: 'MySQL'},
      ],
    },
      methods: {
        deleteFirst() {
          this.items.shift();
          // delete last
        },
        deleteLast() {
          this.items.pop();
          // delete last
        }
      }
  })
</script>
</body>
</html>

The following code will delete/remove first and last element from array in vue js:

<script>
  Vue.config.devtools = true
  var app = new Vue({
    el:'.card-body',
    data:{
      items:[
           { message: 'python' },
           { message: 'C'},
           { message: 'C#'},
           { message: 'Perl'},
           { message: 'MySQL'},
      ],
    },
      methods: {
        deleteFirst() {
          this.items.shift();
          // delete last
        },
        deleteLast() {
          this.items.pop();
          // delete last
        }
      }
  })
</script>

Example 2 – VueJS Remove Specific Element From Array

This example uses the standard splice  method to delete/remove specific item/element from array in vue js:

<!DOCTYPE html>
<html>
<head>
  <title>Vue Js Remove Element in Array Example</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body class="bg-dark">
  <div class="container">
    <div class="col-md-6 offset-md-3">
      <div class="card mt-5">
        <div class="card-header">
          <h5 v-bind:class="red">Vue Js Remove Element in Array Reactively Example</h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
              <ul>
                <li v-for="item in items" v-text="item.message"></li>
              </ul>
              <button class="btn btn-outline-primary" @click="deleteItem(item)">
                Delete Items
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script>
  Vue.config.devtools = true
  var app = new Vue({
    el:'.card-body',
    data:{
      items:[
           { message: 'python' },
           { message: 'C'},
           { message: 'C#'},
           { message: 'Perl'},
           { message: 'MySQL'},
      ],
    },
      methods: {

      deleteItem(item) {
        this.items.splice(this.items.indexOf(item), 1);
        //remove one element starting from the element 'item'
      }
    }
  })
</script>
</body>
</html>

The following code will delete/remove specific item/element from array in vue js:

<script>
  Vue.config.devtools = true
  var app = new Vue({
    el:'.card-body',
    data:{
      items:[
           { message: 'python' },
           { message: 'C'},
           { message: 'C#'},
           { message: 'Perl'},
           { message: 'MySQL'},
      ],
    },
      methods: {

      deleteItem(item) {
        this.items.splice(this.items.indexOf(item), 1);
        //remove one element starting from the element 'item'
      }
    }
  })
</script>

Conclusion

Vue js remove element from array example tutorial. In this tutorial, you have learned how to remove/delete elements/items from array in Vue js.

Recommended VUE JS Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *