Home > Web Front-end > Vue.js > body text

How to delete a piece of data in vue

藏色散人
Release: 2022-12-21 10:41:07
Original
9577 people have browsed it

How to delete a piece of data in vue: 1. Delete a certain piece of data in the ordinary array through the "arr.splice(index, 1)" method; 2. Through "arr.findIndex(item => { ...}arr.splice(id1, 1)" method to delete a piece of data in the array object.

How to delete a piece of data in vue

The operating environment of this tutorial: Windows 10 system, Vue version 3, Dell G3 computer.

How to delete a piece of data in vue?

vue deletes a certain piece of data in the array

Delete a piece of data in the array

Delete a normal array

let arr = [1,2,3,4,5];
 
//方法一
let index = arr.indexOf('3');
arr.splice(index, 1)
//打印结果 [1,2,4,5]
//方法二
let index = arr .findIndex(item => {
            if (item == '3') {
              return true
            }
          })
arr.splice(index, 1)
//打印结果 [1,2,4,5]
Copy after login

Delete an array object

let arr = [
    {
       id:1,
       name:'张三'
    },
    {
       id:2,
       name:'李四'
    },
    {
       id:3,
       name:'王二'
    },
    {
       id:4,
       name:'麻子'
    },
];
let id1 = arr.findIndex(item => {
      if (item.id == '3') {
          return true
      }
 })
 arr.splice(id1, 1)
Copy after login

Use splice() to delete a piece of data in the array

1. When looping to output the array v-for="(item,index) in list" //Need to get the current subscript, item

2. Click the delete button to pass a parameter, in this pop-up window method Get this parameter in. Set a blank in data and assign the parameter to this value.

3. Click the delete button in the pop-up window to get this array.splice(obtained subscript value, 1);

Recommended learning: "vue.js video tutorial"

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template