Home Web Front-end Vue.js How to delete a piece of data in vue

How to delete a piece of data in vue

Dec 21, 2022 am 10:41 AM
vue data

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!

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

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use echarts in vue How to use echarts in vue May 09, 2024 pm 04:24 PM

How to use echarts in vue

The role of export default in vue The role of export default in vue May 09, 2024 pm 06:48 PM

The role of export default in vue

How to use map function in vue How to use map function in vue May 09, 2024 pm 06:54 PM

How to use map function in vue

70B model generates 1,000 tokens in seconds, code rewriting surpasses GPT-4o, from the Cursor team, a code artifact invested by OpenAI 70B model generates 1,000 tokens in seconds, code rewriting surpasses GPT-4o, from the Cursor team, a code artifact invested by OpenAI Jun 13, 2024 pm 03:47 PM

70B model generates 1,000 tokens in seconds, code rewriting surpasses GPT-4o, from the Cursor team, a code artifact invested by OpenAI

AI startups collectively switched jobs to OpenAI, and the security team regrouped after Ilya left! AI startups collectively switched jobs to OpenAI, and the security team regrouped after Ilya left! Jun 08, 2024 pm 01:00 PM

AI startups collectively switched jobs to OpenAI, and the security team regrouped after Ilya left!

The difference between export and export default in vue The difference between export and export default in vue May 08, 2024 pm 05:27 PM

The difference between export and export default in vue

The role of onmounted in vue The role of onmounted in vue May 09, 2024 pm 02:51 PM

The role of onmounted in vue

What are hooks in vue What are hooks in vue May 09, 2024 pm 06:33 PM

What are hooks in vue

See all articles