Vue：数组splice方法的使用

Posted 2023-05-11

参考技术A 语法格式：splice(index, len, [item])

删除：

替换：

新增：

参考： https://blog.csdn.net/xiha_zhu/article/details/80449339

splice() 数据数组中的错误组件

【中文标题】splice() 数据数组中的错误组件

【英文标题】：splice() wrong component in data array

【发布时间】：2021-07-22 11:58:48

【问题描述】：

假设我有一个表单，并且可以通过单击添加或删除一列。

我使用v-for渲染vue组件，当我尝试使用splice()删除特定组件时，它总是删除数组中的最后一个组件。

我无法弄清楚我在这里做错了什么，任何提示将不胜感激。

这是我的代码的一部分： 问题出现在removePerson方法。

父组件

<template>
<div class="form-container">
    <template>
        <div v-for="(child, key) in otherPersonArray" :key="key" class="form-container">
            <button @click="removePerson(key)" class="close">X</button>
            <component :is="child"></component>
        </div>
    </template>
    <button @click="addPerson" >+ Add Person</button>
</div>
</template>

<script>
import otherPerson from './OtherPerson';

export default 
    components: 
        otherPerson
    ,
    data() 
        return 
            otherPersonArray: [],
        
    ,
    methods: 
        addPerson() 
            if (this.otherPersonArray.length <= 10) 
                this.otherPersonArray.push(otherPerson);
            
        ,
        removePerson(key) 
            this.otherPersonArray.splice(key, 1);
        ,
    ,

</script>

例如，当我尝试删除输入值为 1 的组件时，它会删除输入值为 2 的组件。

otherPerson 组件

<template>
<div class="form-container">
    <div class="person">
        <div class="row">
            <div class="form-group col-6">
                <label for="inventor-last-name">Lastname of Person *</label>
                <div class="input-container">
                    <input v-model="lastName" type="text" class="form-control form-control-lg">
                </div>
            </div>
    </div>
</div>
</template>

<script>
export default 
    data() 
        return 
            lastName: '',
        
    ,

</script>

【问题讨论】：

你能在你的 removePerson 函数中使用 console.log(key) 来检查你得到了什么吗？

嗨@SurjeetBhadauriya，我检查了console.log，当我试图删除第一个组件时得到0，但它删除了第二个......

@syltai 你可以在删除之前把你的数组结构放在这里

我不应该数组结构是什么意思，但是数组应该是：[otherPerson, otherPerson, otherPerson]，点击三下添加按钮。 otherPerson 是 vue 组件

@syltai 如果您获得正确的索引值，那么它应该只删除相应的索引值。在此处查看示例stackblitz.com/edit/vue-5kvvd5?file=src%2FApp.vue

【参考方案1】：

有几种方法可以实现这一点，但现在您可以尝试以下方法：

removePerson(key) 
            this.otherPersonArray = this.otherPersonArray.filter(person => 
                 return person.key === key;
             )
        

或

const index = this.otherPersonArray.indexOf(ele by key); // get index by key person key
if (index > -1) 
  this.otherPersonArray.splice(index, 1);

我理解的关键是这里的索引，那么你应该遵循这个：

 var filtered = this.otherPersonArray.filter(function(value, index) 
    return index !== key;
);

如果它仍然不适合你，请告诉我？

这是一个例子：

【讨论】：

嗨@SandeepTiwari，我试过这两个，第一个删除所有组件，当我尝试删除第一个时，第二个仍然删除最后一个组件。

@sytai 你能记录谓词并查看它返回的内容吗？如果不能，你能在这里分享你的填充数组吗？我会在最后尝试一下，让你知道出了什么问题

嗨@SandeppTiwari，感谢第三个代码，我不确定我是否做错了，它返回filtered is not defined。

@syltai 你能给我你的填充数组吗？

我发现我的代码有错误，我成功使用了第三个代码，它改变了otherPersonArray，但它仍然删除了最后一个而不是具体的。

【参考方案2】：

您可以使用Array.prototype.filter

removePerson(key)  
  this.otherPerson = this.otherPersonArray.filter((x, i) => i !== key);