vue this.array.find 在方法/计算属性中给出未定义答案

【问题标题】：vue this.array.find in methods/computed properties gives undefinedvue this.array.find 在方法/计算属性中给出未定义
【发布时间】：2021-09-06 22:45:59
【问题描述】：

我有一个从组件中的 getter 接收的数组 (approvalOptions)，我需要从中找到某个值。

我尝试过的事情：

像这样在方法中使用它（从 ...mapGetters 读取）

methods: {
    approvalDisplayName(value) {
      console.log(this.approvalOptions)
      return this.approvalOptions.find(it => it.key === value).displayName;
    },
  },

在计算中使用它（从 ...mapGetters 读取）（代码示例与上面相同，唯一的区别是使用计算属性块而不是方法'
在方法中使用它（从数据属性中读取）

data() {
   return {
   approvalOptions: [...(objects with keys and values here)]
   }
 },
methods: {
   approvalDisplayName(value) {
     console.log(this.approvalOptions)
     return this.approvalOptions.find(it => it.key === value).displayName;
   },
 },

我在控制台中的所有 3 次都收到一个错误，即approvalOptions.find(...) 不存在。 console.log 还在控制台中打印了一个数组，所以我真的不明白这里发生了什么。

【问题讨论】：

请分享this.approvalOptions和value
我认为真实数据是什么并不重要。 ApprovalOptions 是一个对象数组，其中包含键和值（依次是字符串）以及函数的 value 参数也是一个字符串。但是它们应该对方法 find 是否存在于approvalOptions 上没有影响，对吗？
如果您确定approvalOptions 是数组，那么array#find 将起作用。您可以检查数组中是否存在值并且它正在返回一个对象。
没有足够的上下文来重现问题。你能分享一个复制品的链接吗（例如，在 Codesandbox、Codepen、StackBlitz 等中）？

标签： javascript vue.js vuex

【解决方案1】：

也许这对你有帮助

computed: {
    approvalOptions() {
      return [
        { key: 1, displayName: "Name 1" },
        { key: 2, displayName: "Name 2" }
      ];
    }
  },
  methods: {
    approvalDisplayName(options, value) {
      return options.find((it) => it.key === value).displayName;
    }
  },
  created() {
    console.log(this.approvalDisplayName(this.approvalOptions, 1));
  }

【讨论】：