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

---

成为活动/非活动状态的令牌ID是否相同？ - michaelsnowden

是的，对于两者都是相同的令牌 - 该令牌是我以前使用纯jQuery删除用户的方式。 - NightMICU

我感觉你没有提供足够的代码或者描述得不够清楚，以至于我无法给你一个好的答案。这里有一个可能会有所帮助的 fiddle：http://jsfiddle.net/qm8csjv9/1/。还有一个 fiddle，你可以在“Vue 方法之外”完成它：http://jsfiddle.net/qm8csjv9。 - DutGRIFF

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方法。

- Diego Castaño

---

“Incorrect”（至少对于1.0+版本而言），“$remove”的唯一参数是要删除的项，而不是索引。http://vuejs.org/api/#array-remove-reference - nkconnor

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 - 设置数组元素的值。

列表渲染文档

- nkconnor

Answer 3

在 Vue 2.x.x 中，Array.prototype.$remove 已被移除，你可以使用 splice 替代，如 这里 在 Vue 2 中所示。

一旦找到要删除项的 index，您可以简单地使用：

this.users.splice(index, 1)

- Saurabh

Answer 4

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

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

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

- michaelsnowden

---

我以为Vue会将$data的条目转换为对象？我正在使用vm.$data.push(jsonData)将用户添加到列表中。 - NightMICU

如果您能再详细解释一下，我会非常感激。我已经尝试过了，但是无法弄清楚。谢谢！ - NightMICU

我已经更新了我的问题，并尝试理解您所建议的内容，如果您能提供任何其他信息，我将不胜感激。谢谢！ - NightMICU