如何删除Vue.js中的一个元素？

Question

我是 Vue 新手。我无法从 DOM、Vue.js Javascript 文件中删除项目。我成功地发出了 ajax post 请求，该请求从我的数据库中删除了特定记录。

删除后，我需要将其从 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

通常，您会在 table 行中使用 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>

如何删除Vue.js中的一个元素？

How to remove an element in Vue.js?

javascript

ajax

jquery

vue.js

vue-resource