Vue JS - 从数据数组中删除一个对象

Question

我正在使用 VueJS 在站点中显示活跃用户。当用户激活时，Pusher 会发送 JSON 及其详细信息 -

{
      "token": "97LbfNs7pfPbzVLo",
      "first_name": "Joe",
      "last_name": "Smith",
      "avatar": "http://demo.com/avatar.jpg",
      "phone": "255-255-2555",
      "available" : true,
      "agencies": [
        {
          "name": "Some company",
          "slug": "some-company"
        }
      ]
    }

当用户退出时，他们的token 与available: false 一起发送。然后我需要将它们从我的 Vue data 数组中删除，这就是我卡住的地方。

这是我的 Vue JS 中的 Data 数组（非常基础）：

data: {
      responders: []
}

更新 这是我想要完成的一个非常基本的想法，仅来自 Vue methods 之外。基本上我只需要从数据数组中删除一个项目，我认为这更多的是与 Javascript 相关的问题，而不是特定于 Vue 的问题。

@michaelsnowden 建议将用户存储为对象而不是数组，但我不确定如何实现这一点。我尝试过：

addUser: function() {
            var user = {'asdasdasdop': {name: "Joe"}};
            this.users.push(user);
        }

这给了我：

"users": [
    {
      "asdasdasdop": {
        "name": "Joe"
      }
    }
  ],

但除此之外，我无法弄清楚如何访问这些值或根据令牌从数组中删除一个项目。任何帮助将不胜感激 - 我没有添加任何问题，但我一生都无法弄清楚如何删除某些东西。

Answer 1

Vue 使用以数字索​​引作为参数的 $remove 方法来扩充被监视的数组。因此，您可以通过以下方式找到索引：

var userToken ='potato';
var tokenToRemove;
users.forEach(function(user, index) {
    if(userToken === user.token) {
         tokenToRemove = index;
    }
});

users.$remove(tokenToRemove);

因此您可以通过任何方式找到带有标记的用户的索引 potato ，并使用 $remove 方法。

Answer 2

// hook into pusher    
ready: () => {
      var self = this;
      socket.bind('new-user', (user) => {
        self.addUser(user)
      })
},
methods: {
    addUser: (user) => {
        this.users.push(user)
    },
    deleteUserByToken: (token) => {
        var user = this.findByToken(token);
        if (user != 'undefined') {
            this.users.$remove(user);
        } else { 
            // 
        }
    },
    findByToken: (token) => {
        this.users.find((usr) => {
           return usr.token === token
        });
    }
}

API 参考

• Array.prototype.find
• Array.prototype.$remove
• Array.prototype.$set

List rendering documentation

Answer 3

在 vue 2.x.x 中，Array.prototype.$remove 一直是 removed，您可以使用 splice 代替 vue 2 的回答 here。

一旦你找到index，你想删除一个项目，你可以简单地使用：

this.users.splice(index, 1)

Answer 4

将您的用户存储在一个对象中，而不是一个数组中。

当用户登录时， 用户[user.token] = 用户

当用户退出时， 用户[user.token] = 未定义