Как удалить элемент в Vue.js?

Question

Я новичок в Vue. Я не могу удалить элемент из DOM в файле Vue.js Javascript. Мне удалось сделать запрос на отправку ajax, который удаляет определенную запись из моей базы данных.

Как только он удаляется, мне нужно удалить его из DOM, поэтому он не будет делать покупки без необходимости перезагрузки одной и той же страницы - я думаю, вы знаете, что я имею в виду.

Я могу сделать это в jQuery, но мне интересно, как это должно быть сделано в Vue.js на самом деле?

Вот моя часть кода:

// SOME CODE BEFORE ... 

onSubmit: function(e){ 
    e.preventDefault(); 

    $tablerow = this.el.parentNode.parentNode; 

    // Assign a correct submit request type and url 
    this.vm 
     .$http[this.getRequestType()](this.el.action) 
     .then(this.onComplete.bind(this)) 
     .catch(this.onError.bind(this)) 
    ; 
}, 

onComplete: function(){ 

    // Remove the item from a DOM <<< I NEED TO REMOVE PARENT <tr/> ELEMENT 
    $(this.el).closest('tr').fadeOut(300, function(){ 
     this.remove(); 
    }); 

    // If complete message exists, use it as a feedback 
    if(this.params.complete){ 
     alert(this.params.complete); 
    } 
}, 

// SOME CODE AFTER ... 

Любые предложения, пожалуйста? Извините, если мой вопрос немой, но у меня нет лучших знаний в программировании.

Answer 1

Обычно у вас будет список предметов, которые вы показываете с помощью v-for в строках таблицы, которые хранятся в массиве. После вашего вызова ajax вы можете удалить этот элемент, используя this.items. $ Remove (item), и он будет автоматически удален из того места, где он отображается в DOM.

Поскольку вы не показали свой шаблон я попытаюсь воссоздать подобный сценарий того, что я думаю, что вы пытаетесь сделать

data: function(){ 
    return { 
     items: ['item1','item2','item3'] 
    } 
}, 

methods: { 
    remove: function(item){ 
     ajaxCall.then(function(){ 
      this.items.$remove(item);//will remove the <tr> from the DOM 
     }); 
    } 
} 

Ваш шаблон может быть как

<tbody> 
    <tr v-for="item in items" v-on:click="remove(item)">{{ item }}</tr> 
</tbody>