如何在 vuejs 中将“.find()”与数组一起使用答案

【问题标题】：How to use ".find()" with an array in vuejs如何在 vuejs 中将“.find()”与数组一起使用
【发布时间】：2019-01-11 12:36:36
【问题描述】：

我的项目组件上有以下代码：

<template>
  <div>
    <agent
      v-for="agent in agents"
      :uuid="agent.uuid"
      :key="agent.uuid"
      :socket="socket">
    </agent>
    <p v-if="error">{{error}}</p>
  </div>
</template>

<style>
  body {
    font-family: Arial;
    background: #f8f8f8;
    margin: 0;
  }
</style>

<script>
const request = require('request-promise-native')
const io = require('socket.io-client')
const { serverHost } = require('../config')
const socket = io()
module.exports = {
  data () {
    return {
      agents: [],
      error: null,
      socket
    }
  },
  mounted () {
    this.initialize()
  },
  methods: {
    async initialize () {
      const options = {
        method: 'GET',
        url: `${serverHost}/agents`,
        json: true
      }
      let result
      try {
        result = await request(options)
      } catch (e) {
        this.error = e.error.error
        return
      }
      this.agents = result
      socket.on('agent/connected', payload => {
        const { uuid } = payload.agent
        const existing = this.agents.find(a => a.uuid === uuid)
        if (!existing) {
          this.agents.push(payload.agent)
        }
      })
    }
  }
}
</script>

似乎一切正常，但是，当我连接代理时，下面一行抱怨...

 const existing = this.agents.find(a => a.uuid === uuid)

控制台中的消息 sais 'Uncaught TypeError: n.agents.find is not a function'

我不知道错误在哪里...有什么帮助吗？谢谢一百万

更新 -> 这是我在“结果”中的内容：

{…}
agentMAC: (...)
agentName: (...)
connected: (...)
createdAt: (...)
id: (...)
lastAccess: (...)
loginDate: (...)
pid: (...)
updatedAt: (...)
userId: (...)
__ob__: Ae {value: {…}, dep: fe, vmCount: 0}
get agentMAC: ƒ ()
set agentMAC: ƒ (t)
get agentName: ƒ ()
set agentName: ƒ (t)
get connected: ƒ ()
set connected: ƒ (t)
get createdAt: ƒ ()
set createdAt: ƒ (t)
get id: ƒ ()
set id: ƒ (t)
get lastAccess: ƒ ()
set lastAccess: ƒ (t)
get loginDate: ƒ ()
set loginDate: ƒ (t)
get pid: ƒ ()
set pid: ƒ (t)
get updatedAt: ƒ ()
set updatedAt: ƒ (t)
get userId: ƒ ()
set userId: ƒ (t)
__proto__: Object

【问题讨论】：

result的值是多少？
尝试用过滤器替换查找。
和str一样，this.agents = result你确定result是一个数组吗？
result 包含一个带有代理的对象数组。如果我使用 typeof 它显示“对象”但是......这可能是因为只有 1 个元素？我试图用过滤器替换 find ，但它没有用......
不要描述值，而是用你得到的 actual 值更新你的问题。它似乎不是一个数组（但可能是一个 JSON 字符串）。或者，您可能正在使用不支持 Array.prototype.find() 的中世纪浏览器（例如 Internet Explorer 11）。

标签： javascript arrays vue.js socket.io

【解决方案1】：

从您的更新看来，结果值是一个对象，当您将它分配给 this.agents 时，它现在也只是一个对象。如果结果将是单个对象或对象数组，那么最好如下分配结果，以确保它是一个数组。

this.agents = result ? [].concat(result) : []

注意：如果结果为 undefined/null，上面的三元检查也将确保分配空数组。

【讨论】：

【解决方案2】：

这应该是您要使用的正确方法。

userobjectbyid: function(id) {
  var userobject = this.users.find(user => { 
      if (user.id === id) { 
        return user
        } 
        });
  return userobject;
}

【讨论】：