javascript - 无法获取正确的用户 ID 来删除 vue.js 中的列表元素

标签 javascript html asp.net vue.js

我试图从列表中选择用户,然后单击按钮删除该用户,从而从数据库中删除该用户。我尝试实现删除用户的方法,但无法从所选用户获取 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/

相关文章:

Javascript 类 JQuery 库

javascript - 淡入淡出div

c# - 如何在 ASP.net MVC 中使用分部 View 在 Webgrid 中绑定(bind)数据

javascript - 鼠标悬停时 Div 扩展和收缩?

javascript - 延迟加载具有占位符主色的图像

javascript - 如何让 jQuery 仅在按钮单击后执行而不是在页面加载时执行

Javascript - 在水果列表下拉列表中添加一次橙色

javascript - 如何去掉页面顶部的这些字母

html - ng-class 未应用于 Accordion header

asp.net - 支持缓存 VirtualPathProvider 服务内容的 StaticFileHandler