根据单击事件的索引从父值删除输入

Question

我正在使用BootstrapVue。

我想在点击我的parent.vue中的按钮后，将我的child.vue中的输入splice。

但是每次我删除一些东西在我的父母。value——我可以保证它是有效的——只是子元素中的最后一个Input元素。Vue将被删除。

如果你想试一下(你可以复制粘贴代码并运行它):

1. 添加3个输入
2. 打开每个输入并写入数字，如Input 1 -> 1111,Input 2 -> 2222和Input 3 -> 3333(您也可以添加更多的输入信息，但在这里并不真正相关)
3. 删除例如第二个输入，通常它现在应该像Input 1 -> 1111,Input 2 -> 3333，但它总是Input 1 -> 1111和Input 2 is still 2222，因为它总是删除最后的输入信息。

如何解决这个问题，正确的输入信息也会被删除?

非常感谢!

更新:

错误是我的parent.vue中的index在删除某些内容后发生了变化，但在我的child.vue中，它没有删除正确的index，也没有重新创建所有其他indexes

code in my parent.vue:

<template>
<div>
<div class="inputArea mt-2" v-for="(id, indexParent) in inputs" :key="indexParent">
<div class="col-md-12">
<b-button-group>
<b-button class="col-md-6" v-b-toggle="'newInput' + indexParent" variant="danger">Input</b-button>
<b-button class="col-md-6" @click="deleteThis(indexParent)" variant="danger">Delete</b-button>
</b-button-group>
</div>
<child :key="indexParent" :indexParent="indexParent" ref="ChildComponent" />
</div>
<div class="mt-3 mb-3 ml-3 mr-3">
<b-button @click="addThis()" variant="success">Add Input</b-button>
</div>
</div>
</template>

<script>
import child from './child.vue'
export default {
name: "parent",
components: {
child,
},
data() {
return {
inputs: [{}],
};
},
methods: {
deleteThis(indexParent) {
this.inputs.splice(indexParent, 1);
this.$refs.ChildComponent[indexParent].deleteThisFromParent(indexParent);
},
addThis() {
this.inputs.push({});
},
},
};
</script>

我child.vue:

<template>
<b-collapse visible :id="'newInput' + indexParent" class="mt-2">
<div v-for="(id, indexChild) in inputs" :key="indexChild">
<table class="table table-striped mt-2">
<tbody>
<h5 class="ml-1">Input Informations</h5>
<tr>
<div class="mt-2">Input</div>
<b-form-input></b-form-input>
</tr>
</tbody>
</table>
</div>
<b-button @click="addInputInfo()">Add Input Informations</b-button>
</b-collapse>
</template>

<script>
export default {
name: "child",
methods: {
deleteThisFromParent(indexParent) {
console.log(this.inputs); //Here I get the correct input which I want to delete
console.log(indexParent); //correct index of parent.vue
this.inputs.splice(); //here it deletes the last Input everytime.. 
},
addInputInfo() {
this.inputs.push({});
},
},
props: ["indexParent"],
data() {
return {
inputs: [{}],
};
},
};
</script>

Answer 1

答案很简单。

在我的数组中设置一个唯一的id是解决方案!

在我的模板中的变化:设置:key为id.id(我将在我的脚本中创建)，并通过点击我的deleteButton后我的unique ID方法。

<div class="inputArea mt-2" v-for="(id, indexParent) in inputs" :key="id.id">
....
<b-button class="col-md-6" @click="deleteThis(id.id)" variant="danger">Delete</b-button>
....
</div>

脚本更改:设置id: null，并给出第一个自动生成的输入->id = 0。之后，转到方法并将splice引用到index，这是我在使用map搜索完整的array后获得的。在addInput我设置唯一的Id每次我的按钮将被点击。

data() {
return {
id: null, 
inputs: [{
id: 0,
}],
};
},
methods: {
deleteThis(id) {
this.inputs.splice(id.id, 1);
},
addThis() {
this.inputs.push({
id: this.id += 1
});
},
},

最后一步是改变传递给我的child.vue的值:

<child :key="id.id" :indexParent="id.id"/>

之后，indexParent仍然包含的所有内容都可以更改为id.id-

这对我来说很好!

Answer 2

在子组件中将deleteThisFromParent()中的this.inputs.splice();更改为this.inputs.splice(indexParent, 1)