vue.jsで、jsonのvalueを定義した文字列に読み替えたい

Question

vue.jsで、jsonのvalueを定義した文字列に読み替えたいです。
お詳しい方、ご教示お願いできませんでしょうか。

前提・実現したいこと

配列recordsの中に、1つのjsonがあります。

<script>
export default {
  data: function () {

    return {
      records: [
        {
          "ID": 3,
          "Name": "タロウ",
          "Gender": 0,
        },
      ],

      map_tmp: [
        {value: 0, label: "男性"},
        {value: 1, label: "女性"},
      ]
    }
  }
}
</script>

↑この中のGenderというkeyをもとに、map_tmpを参照して、
labelの値を↓で表示したいです。
性別部分の表示を"男性"とするには、どのように書けば良いのでしょうか。

<template>
    <div class="container" v-for="record in records" v-bind:key="record.ID">
      投稿No : {{ record.ID }} // 3
      名前: {{ record.Name }} // タロウ
      性別 : {{ record.Gender }} // "0"を表示するが、"男性"と表示したい
    </div>
</template>

関数を作ったのですがうまく動かず、お詳しい方ご教示いただければ幸いです。
よろしくお願いします。

Answer 1

// 引数 i は record.Gender
getGenderLabel (i) {
  // map_tmp の中から引数 i と一致する value を持つものを取得します。
  const map = this.map_tmp.find(map => map.value === i)
  // map は map_tmp の中のどれかです。その label を返します。
  return map.label
}

https://jsfiddle.net/4L5rknqm/

Comments

[umino]

neko_daisukiさん
さっそくのご回答ありがとうございます。引数を受け取り、引数と一致するvalueを探し、そのlabelを返すメソッドを使うのですね。
実際の例＆コメントに加えjsfiddleでまでご提示までいただき、大変助かりました。実際に使ったところ、期待した動作をしました。この書き方を他でも応用したいと思います。
ありがとうございました。