我试图从列表中选择用户,然后单击按钮删除该用户,从而从数据库中删除该用户。我尝试实现删除用户的方法,但无法从所选用户获取 ID。
有谁知道如何在removeUser方法中访问所选用户的用户ID?
我的html代码:
<template id="user-template">
<div>
<ul class="collection">
<a class=" collection-item avatar" v-for="user in users" v-on:click="userClicked(user, $event)">
<span class="name">{{ user.firstName }}</span>
</a>
</ul>
<div id="removeUser" class="modal">
<div class="modal-footer">
<a class=" modal-action modal-close btn-flat" v-on:click="removeUser">yes</a>
</div>
</div>
</div>
</template>
<div id="app">
<a class="btn-floating red" data-target="removeUser"></a>
<user @selected-user="setSelected"></user>
</div>
我的 vue 组件:
user: {
template: '#user-template',
data: function () {
return {
users: [],
}
},
methods: {
removeUser: function (user) {
this.$http.delete('/user/', user).then(function (data) {
this.users.$remove(user)
});
}
}
最佳答案
尝试:
<a class=" collection-item avatar" v-for="(user, index) in users"
:key="user" v-on:click="userClicked(user, index, $event)">
user: {
template: '#user-template',
data: function () {
return {
users: [],
userSelected: { id: -1, index: -1 }
}
},
methods: {
userClicked: function (user, index, event) {
this.userSelected.id = user.id;//If user has an id property
this.userSelected.index = index;
});
removeUser: function () {
if( this.userSelected.id > -1 ) {
this.$http.delete('/user/' + this.userSelected.id).then(function (data) {
this.users.splice(this.userSelected.index, 1);
this.userSelected.id = -1;
this.userSelected.index = -1;
}
});
}
}
如果没有用户选择,您可以禁用删除按钮:
<div :disabled="userSelected.id === -1" id="removeUser" class="modal">
<div class="modal-footer">
<a class=" modal-action modal-close btn-flat" v-on:click="removeUser">yes</a>
</div>
</div>
或者如果你不想使用索引来删除users数组中的用户,你可以使用id:
methods: {
removeUserWithId: function( id ) {
for( var i = 0, length = this.users.length; i < length; i++ ) {
if( this.users[i].id === id ) {
this.users.splice(i, 1);
return;
}
}
}
}
注意:
自 Vue 2.2.0+ 起,v-for 中需要 key link
$remove 已弃用:link
关于javascript - 无法获取正确的用户 ID 来删除 vue.js 中的列表元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43125273/