Tengo un código donde puedo agregar entradas, con @click="addInput()" .
Ahora estoy tratando de eliminar estas entradas también con @click="deleteInput() . He intentado hacer esto con this.inputs.splice(index, 1) - pero cuando intento esto solo mi última entrada será borrado.. pero no se porque..
¿Cómo puedo resolver eso, que mi entrada específica que quiero eliminar se eliminará?
El código adicional en mis entradas en addInput -> name es del elemento secundario
¡Gracias por ayudarme!
mi plantilla:
<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" vb-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>mi guion:
<script> export default { name: 'test', data() { return { inputs: [{ name: "", }], } }, methods: { deleteInput(index) { this.inputs.splice(index, 1) }, addInput() { this.inputs.push({ name: "", }) }, }, } </script>Parece que su método de eliminación funciona, verifique el fragmento por favor:
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>