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

Posted 2023-02-22

【中文标题】如何删除 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 在这里发挥了魔力。这些<tr> 元素的显示取决于您数据中的items。因此，如果您删除您的项目，您就是在隐式删除您的 tr 元素。如果您有相同的 $remove vue 方法，您将只从数据中删除元素，但 v-for 指令的绑定将其与 tr 元素同步