javascript - 单击按钮后删除创建的输入
问题描述
我有一个代码,我可以在其中添加输入,使用@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>
解决方案
看起来您的删除方法有效,请检查片段:
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>
推荐阅读
- html - Angular HTML 选择表单仅显示第一个选项
- kubernetes - 禁用 Internet 时,kube-service-catalog pod 处于“CrashLoopBackOff”状态
- java - 从 gradle 依赖项构建 jar 文件
- makefile - 使用 % 的 makefile 目标顺序
- php - 如何使用 DOMDocument 将特定的顺序元素包装在单个容器中?
- nginx - 浏览器“记住”临时重定向一段时间。我可以防止吗?
- python - Writing variables and list to csv in the same row
- ruby-on-rails - 创建新的连接表行而不覆盖现有行
- swagger - 当我有自定义基本网址时,如何使用 swagger 设置 Swashbuckle v5?
- java - 如何在 OWL API 中将对象属性与类一起使用?