I have a code where I can add inputs, with @click="addInput()" .

Now I'm trying do delete these inputs as well with @click="deleteInput(). I've tried to do this with this.inputs.splice(index, 1) - but when I try this only my last input will be deleted.. but I don't know why..

How can I solve that, that my specific Input which I want to delete will be deleted?

The additional code in my inputs at addInput -> name is from child element

Thanks for helping me out!

my template:

<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>

my script:

<script>
export default {
  name: 'test',

  data() {
    return {
      inputs: [{
        name: "",
      }],
    }
  },

  methods: {
    deleteInput(index) {
      this.inputs.splice(index, 1)
    },
  
    addInput() {
      this.inputs.push({
        name: "",
      })
    },
  },  
}
</script>

CodePudding user response：

Looks like your delete method works, check snippet pls:

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,IntersectionObserver" 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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>