Cách xóa một mục khỏi một mảng Vue.js

Question

Tôi mới dùng vue.js (2) và hiện tôi đang làm việc trên một ứng dụng sự kiện đơn giản. Tôi đã quản lý để thêm các sự kiện nhưng bây giờ tôi muốn xóa các sự kiện dựa trên cách nhấp vào một nút.

HTML

<div class="list-group"> 

     <div class="list-group-item" v-for="event in events"> 
      <h4 class="list-group-item-heading"> 
       {{ event.name }} 
      </h4> 

      <h5> 
       {{ event.date }} 
      </h5> 

      <p class="list-group-item-text" v-if="event.description">{{ event.description }}</p> 

      <button class="btn btn-xs btn-danger" @click="deleteEvent(event)">Delete</button> 
     </div> 

    </div> 
</div> 

JS (Vue)

new Vue ({ 
    el: '#app', 

    data: { 
     events: [ 
      { 
       id: 1, 
       name: 'Event 1', 
       description: 'Just some lorem ipsum', 
       date: '2015-09-10' 
      }, 
      { 
       id: 2, 
       name: 'Event 2', 
       description: 'Just another lorem ipsum', 
       date: '2015-10-02' 
      } 
     ], 

     event: { name: '', description: '', date: '' } 
    }, 

    ready: function() { 

    }, 

    methods: { 

     deleteEvent: function(event) { 
       this.events.splice(this.event); 
     }, 

     // Adds an event to the existing events array 
     addEvent: function() { 
      if(this.event.name) { 
       this.events.push(this.event); 
       this.event = { name: '', description: '', date: '' }; 
      } 
     } 

    } // end of methods 

}); 

tôi đã cố gắng để vượt qua sự kiện này đến chức năng và hơn xóa một với chức năng lát, tôi nghĩ rằng nó là mã mà để xóa một số dữ liệu khỏi mảng. Cách tốt nhất để xóa dữ liệu trong mảng bằng một nút đơn giản và sự kiện onclick là gì?

Answer 1

Bạn đang sử dụng splice theo cách không đúng.

Các quá tải là:

array.splice (bắt đầu)

array.splice (bắt đầu, deleteCount)

array.splice (bắt đầu, deleteCount, item1, ITEM2, .. .)

Bắt đầu có nghĩa là chỉ mục mà bạn muốn bắt đầu, không phải là phần tử bạn muốn xóa. Và bạn nên chuyển tham số thứ hai deleteCount thành 1, có nghĩa là: "Tôi muốn xóa 1 phần tử bắt đầu từ chỉ mục X".

Vì vậy, bạn đi tốt hơn với:

deleteEvent: function(event) { 
    this.events.splice(this.events.indexOf(event), 1); 
} 

Ngoài ra, bạn đang sử dụng một tham số, vì vậy bạn truy cập trực tiếp, không phải với this.event. Tuy nhiên, theo cách này, bạn sẽ tra cứu không cần thiết cho indexOf trong mỗi lần xóa, để giải quyết điều này, bạn có thể xác định biến số index tại v-for của bạn, và sau đó vượt qua nó thay vì đối tượng sự kiện.

Đó là:

v-for="(event, index) in events" 
... 

<button ... @click="deleteEvent(index)" 

Và:

deleteEvent: function(index) { 
    this.events.splice(index, 1); 
} 

Answer 2

Nó thậm chí còn hài hước hơn khi bạn đang làm nó với đầu vào, bởi vì họ nên bị trói buộc. Nếu bạn quan tâm làm thế nào để làm điều đó trong vue2 và có tùy chọn để chèn và xóa nó, xin vui lòng, có một cái nhìn một js fiddle

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    finds: [] 
 
    }, 
 
    methods: { 
 
    addFind: function() { 
 
     this.finds.push({ value: 'def' }); 
 
    }, 
 
    deleteFind: function (index) { 
 
     console.log(index); 
 
     console.log(this.finds); 
 
     this.finds.splice(index, 1); 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script> 
 
<div id="app"> 
 
    <h1>Finds</h1> 
 
    <div v-for="(find, index) in finds"> 
 
    <input v-model="find.value"> 
 
    <button @click="deleteFind(index)"> 
 
     delete 
 
    </button> 
 
    </div> 
 
    
 
    <button @click="addFind"> 
 
    New Find 
 
    </button> 
 
    
 
    <pre>{{ $data }}</pre> 
 
</div>