我正在使用BootstrapVue。
我想在点击我的parent.vue
中的按钮后,将我的child.vue
中的输入splice
。
但是每次我删除一些东西在我的父母。value——我可以保证它是有效的——只是子元素中的最后一个Input元素。Vue将被删除。
如果你想试一下(你可以复制粘贴代码并运行它):
- 添加3个输入
- 打开每个输入并写入数字,如
Input 1 -> 1111
,Input 2 -> 2222
和Input 3 -> 3333
(您也可以添加更多的输入信息,但在这里并不真正相关) - 删除例如第二个输入,通常它现在应该像
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>
答案很简单。
在我的数组中设置一个唯一的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
-
这对我来说很好!
在子组件中将deleteThisFromParent()中的this.inputs.splice();
更改为this.inputs.splice(indexParent, 1)