如何在Vue.js中删除元素？

Question

我是Vue的新手。 我无法从Vue.js Javascript文件中的DOM中删除项目。 我成功地提出了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>