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

Question

I have an array (approvalOptions) that i receive from getters in a component, from which i need to find a certain value.

Things i have tried:

1. Use it in methods (read from ...mapGetters) like so

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

2. use it in computed (read from ...mapGetters) (code sample same as above, only difference being the use of computed properties' block instead of methods'
3. use it in methods (read from data properties) like so

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;
   },
 },

All three times I get an error in the console that approvalOptions.find(...) doesnt exist. The console.log also prints an array in the console so i really don't understand what is going on here.

Answer 1

Maybe this can help you

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));
  }