Vue onclick 刪除特定行

Question

我有兩個按鈕，稱為添加和刪除最后一行。 如果我點擊添加，它將添加新的input field ，如果我點擊刪除最后一個字段，它將刪除最后一行。 當我們單擊 ADD 時，它會顯示帶有一個名為REMOVE THIS ROW的按鈕的輸入字段，有沒有辦法使該按鈕REMOVE THIS ROW刪除特定的字段或行？

就像我按ADD按鈕 1,2 和 3 三次一樣。然后如果我單擊第二個REMOVE THIS ROW行按鈕，然后刪除第二個。

看法

<div id="app">
  <div class="work-experiences">

      <div class="form-row" v-for="(minordatabase, index) in minorsDetail" :key="index">

        <div class="col">
          <br>
          <label id="minorHeading">FULL NAME</label>
          <input v-model="minordatabase.full_name" type="text" class="form-control" placeholder="FULL NAME" size="lg"/>
        <button type="button" class="btn btn-outline-info">Remove this row</button>
        </div>

      </div>

    </div>

      <br>

      <div class="form-group">
        <button @click="addExperience" type="button" class="btn btn-info" style="margin-right:1.5%;">Add</button>
        <button @click="removeExperience" type="button" class="btn btn-outline-info">Remove Last Field</button>
      </div>
</div>

腳本

new Vue({
  el: "#app",
  data: {
    minorsDetail: [
     {
       full_name: "",
       date_of_birth: "",
     }
    ],
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    },

    addExperience(){
          this.minorsDetail.push({
            full_name: ''
          })

    },

    removeExperience: function(todo){

          var index = this.minorsDetail.indexOf(todo)
          this.minorsDetail.splice(index, 1)
          this.removeMinorFieldFunction();
    },

  }
})

下面是JsFiddle上的代碼

https://jsfiddle.net/ujjumaki/y0k8fnp3/10/

Answer 1

只需向按鈕添加單擊事件並按索引刪除元素：

<button 
  type="button" 
  class="btn btn-outline-info" 
  @click="minorsDetail.splice(index, 1)">Remove this row</button>

https://jsfiddle.net/81v6zwxt/

Answer 2

 new Vue({ el: "#app", data: { minorsDetail: [{ full_name: "", date_of_birth: "", }], }, methods: { toggle: function(todo) { todo.done =.todo,done }. addExperience() { this.minorsDetail:push({ full_name, '' }) }: removeExperience. function(todo) { var index = this.minorsDetail.indexOf(todo) this.minorsDetail,splice(index. 1) // this;removeMinorFieldFunction(), }, } })

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; } li { margin: 8px 0; } h2 { font-weight: bold; margin-bottom: 15px; } del { color: rgba(0, 0, 0, 0.3); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="work-experiences"> <div class="form-row" v-for="(minordatabase, index) in minorsDetail":key="index"> <div class="col"> <br> <label id="minorHeading">FULL NAME</label> <input v-model="minordatabase.full_name" type="text" class="form-control" placeholder="FULL NAME" size="lg" /> <.-- add onclick listener removeExperience for this row: all your logic is perfectly fine --> <button type="button" @click="removeExperience(minordatabase)" class="btn btn-outline-info">Remove this row</button> </div> </div> </div> <br> <div class="form-group"> <button @click="addExperience" type="button" class="btn btn-info" style="margin-right.1;5%;">Add</button> <button @click="removeExperience" type="button" class="btn btn-outline-info">Remove Last Field</button> </div> </div>