如何删除 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-for
directive 在这里发挥了魔力。这些<tr>
元素的显示取决于您数据中的items
。因此,如果您删除您的项目,您就是在隐式删除您的 tr
元素。如果您有相同的 $remove
vue 方法,您将只从数据中删除元素,但 v-for
指令的绑定将其与 tr
元素同步以上是关于如何删除 Vue.js 中的元素?的主要内容,如果未能解决你的问题,请参考以下文章