单击按钮后删除创建的输入

Question

我有一个代码，我可以添加输入，与@click="addInput()"。

现在我试着用@click="deleteInput()删除这些输入。我曾试图这样做与this.inputs.splice(index, 1)-但当我尝试这只有我最后的输入将被删除。但我不知道为什么……

我如何解决这个问题，我想要删除的特定输入将被删除?

我在addInput->name是来自子元素

谢谢你的帮助!

我的模板:

<template>
<div >
<div class="mt-2" v-for="(id, index) in inputs" :key="index">
<div class="row mb-3">
<b-button-group class="col-md-12">
<b-button class="col-md-8" v-b-toggle="toggleElementInChildVue" variant="danger"></b-button>
<b-button @click="deleteInput(index)" class="col-md-4" variant="danger">Delete this!</b-button>
</b-button-group>
</div>
</div>
<div>
<b-button @click="addInput()">Add Input</b-button>
</div>
</div>
</template>

我的脚本:

<script>
export default {
name: 'test',
data() {
return {
inputs: [{
name: "",
}],
}
},
methods: {
deleteInput(index) {
this.inputs.splice(index, 1)
},

addInput() {
this.inputs.push({
name: "",
})
},
},  
}
</script>

Answer 1

看起来你的删除方法有效，请检查代码片段:

new Vue({
el: '#demo',
data() {
return {
inputs: [{
name: "aa",
}],
}
},
methods: {
deleteInput(index) {
this.inputs.splice(index, 1)
},

addInput() {
this.inputs.push({
name: "bb",
})
},
},  
})
Vue.config.productionTip = false
Vue.config.devtools = false

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
<div >
<div class="mt-2" v-for="(name, index) in inputs" :key="index">
<div class="row mb-3">
<b-button-group class="col-md-12">
<b-button class="col-md-8"  variant="danger">{{name}}</b-button>
<b-button @click="deleteInput(index)" class="col-md-4" variant="danger">Delete this!</b-button>
</b-button-group>
</div>
</div>
<div>
<b-button @click="addInput()">Add Input</b-button>
</div>
</div>

</div>