如何删除 Vue.js 中的元素?

Posted

技术标签:

【中文标题】如何删除 Vue.js 中的元素?【英文标题】:How to remove an element in Vue.js? 【发布时间】:2016-07-02 21:32:17 【问题描述】:

我是 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 ...

有什么建议吗?对不起,如果我的问题很愚蠢,但我没有最好的编程知识。

【问题讨论】:

您已经在使用 jQuery,为什么不继续使用它呢? Vue.js 在技术上是一个 Javascript 文件,因此您当前使用 .remove() 的方式是在 Javascript 容量中。但是,如果您要说$(this).remove(),那将在函数的jQuery 意义上使用.remove()。另外,应该注意的是,jQuery 也是围绕 Javascript 构建的 是的,但正如我所提到的,我想知道如何在 Vue.js 中做到这一点。为了性能,vue和jquery哪个更好? 【参考方案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>

【讨论】:

抱歉之前没提过,不过我之前就是这么干的。所以,据我了解,如果items 的数组没有在data 中声明,那么在Vue 中就没有办法做到这一点,对吧? 您应该使用自定义指令,该指令将进行此调用并在 ajax 调用后移除自身(DOM 元素)。 v-fordirective 在这里发挥了魔力。这些&lt;tr&gt; 元素的显示取决于您数据中的items。因此,如果您删除您的项目,您就是在隐式删除您的 tr 元素。如果您有相同的 $remove vue 方法,您将只从数据中删除元素,但 v-for 指令的绑定将其与 tr 元素同步

以上是关于如何删除 Vue.js 中的元素?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 vue.js 中删除类

Vue.js - 如何通过 tbody 中的删除按钮删除选定的行?

如何从 Vue.js 中的数组中删除一个项目

删除所有项目的类并将类添加到 Vue.js 中的单击项目

如何从vue js中的url中删除hasbang

如何使用 vue.js 中的单击事件从数据表中删除行而不干扰计算函数