單擊按鈕后刪除創建的輸入

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>