How to delete a row in a list using vue.js

This article shares with you the example operation and code sharing of vue.js deleting a row in the list. Friends who are interested can refer to it.

splice(index,num,item1,item2,...,itemX) method adds/removes items to/from the array and returns the deleted item.

Note: index--Specifies the location of adding/deleting items

num--The number of items to be deleted

item--New items added to the array

The splice() method removes zero or more elements starting at index and replaces those removed elements with one or more values ​​declared in the parameter list.

If an element is deleted from arrayObject, an array containing the deleted element is returned.

(1)html code:

 <p id="app">
   <ul>
    <li v-for="todo in todos">
     <span>{{ todo.text }}</span>
     <button @click="removeTodo($index)">X</button>
    </li>
   </ul>
  </p>

(2)js code:

 <script>
    new Vue({
     el: &#39;#app&#39;,
     data: {
      todos: [
       { text: &#39;Add some todos&#39; },
       { text: &#39;Learn JavaScript&#39; },
       { text: &#39;Learn Vue.js&#39; },
       { text: &#39;Build Something Awesome&#39; }
      ]
     },
     methods: {
      removeTodo: function (index) {
       this.todos.splice(index, 1);
      }
     }
    })
  </script>

(3) Effect display:

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to PHP Chinese website!

Related recommendations:

Methods for parsing vue to add and delete elements

About the mutation method of vue.js array

About change analysis of vue detection objects and arrays

The above is the detailed content of How to delete a row in a list using vue.js. For more information, please follow other related articles on the PHP Chinese website!