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: {
      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);

因此您可以通过任何方式找到具有令牌马铃薯的用户的索引，并使用$ 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参考

List rendering documentation

Answer 3

在vue 2.x.x中，Array.prototype.$remove已为removed，您可以使用splice代替here使用vue 2。

一旦找到要删除项目的index，您只需使用：

this.users.splice(index, 1)

Answer 4

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

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

当用户退出时， users [user.token] = undefined

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

4 个答案: