gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 18:41:12 25 4
gpt4 key购买 nike

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

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

最佳答案

通常,您将在表行中使用 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>

关于javascript - 如何删除 Vue.js 中的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36045241/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com