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: {
      responders: []
}

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

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

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

这给了我：

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

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

原文由 NightMICU 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

// 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参考

• 数组.prototype.find
• 数组.prototype.$remove
• 数组.prototype.$set

列出渲染文档

原文由 nkconnor 发布，翻译遵循 CC BY-SA 3.0 许可协议