JavaScriptで、指定したmap[]のkeyからvalueを取り出すメソッドを実装したい

Question

前提・実現したいこと

vue.jsで、指定したmap[]のkeyからvalueを取り出すメソッドを実装したいです。
詳細は下記に記載いたしました、お詳しい方、ご教示いただけますと幸いです。

<div class="container" v-for="r in records" v-bind:key="record.id">

  <div class="row"><p>性別 : {{ getLabel(map_gender, r.gender) }}</p></div>
　<!-- 期待する戻り値："男の子" map_gender[]のvalue(1)に紐づくlabel("男の子")を取得したい。① -->

  <div class="row"><p>高齢者への譲渡 : {{ getLabel(map_seniorPerson, r.senior_person) }}</p></div>
　<!-- 期待する戻り値："応相談" map_seniorPerson[]のvalue(2)に紐づくlabel("応相談")を取得したい。② -->

</div>

<script>
export default {
  data: function () {
    return {
      map_gender: [
        {value: 0, label: "女の子"},
        {value: 1, label: "男の子"}, //①
        {value: 2, label: "その他/不明"},
      ],

      map_seniorPerson: [
        {value: 0, label: "不可"},
        {value: 1, label: "可"},
        {value: 2, label: "応相談"}, //②
      ],
//......(以下略)
  methods: {
    getLabel(mapName, i) { // 第1引数：mapの変数名, 第2引数:数値
      return this.mapName.find(map => map.value === i).label //指定したmapのvalueに紐づくlavelを返す
    },
//......(以下略)

発生している問題・エラーメッセージ

TypeError: Cannot read property 'find' of undefined

引数でmap変数を渡していますが、それが見えていないようです。

mapがたくさんあるため、
getLabel()はどのmap変数にも使えるように引数で渡せるようにしたいのですが、
この場合、どのように書けば良いでしょうか？

お詳しい方、ご教示いただけますと幸いです。よろしくお願いします。

Comments

[think49]

Vue.jsに詳しくないので合っているかわかりませんが、

> return this.mapName.find(

"mapName" という名前のプロパティを参照したいのですか。
変数 mapName の評価値をプロパティ名として指定したかったのでは？

this[mapName].find()

少なくとも質問文の書き方では、変数 mapName は使われていませんので、無駄な引数と化しています。

Answer 1

this.mapNameではなく、mapNameで良いのではないでしょうか。

    getLabel(mapName, i) { // 第1引数：mapの変数名, 第2引数:数値
      return mapName.find(map => map.value === i).label //指定したmapのvalueに紐づくlavelを返す
    },

Comments

[umino]

plasticgrammerさん
早速のご回答ありがとうございます。
教えていただいた通りにしたら動作しました。this.は自オブジェクトを明示するもので、不要でした。
大変助かりました、ありがとうございます。