Javascript(vue.js)で、配列のデータを指定して取り出したい

Question

前提・実現したいこと

javascript(vue.js)で、とある配列の中のデータを取得したいです。
お詳しい方、ご教示お願いできませんでしょうか。

該当のソースコード

res.images.positionが最小値のimage_pathを取得したいです。

<template>
<!-- res[]の中にはid,images[]が存在する。 -->
<!-- images[]の中のpositionが最小値のimage_pathを取り出したい。 -->
<div v-for="r in res" :key="res.id">
    {{ r.images[Math.min(Number(r.images.position))].image_path }}
    <!-- 期待する結果： "https://hoge.png" -->
    <!-- 実際の結果： Cannot read property 'image_path' of undefined -->
    <hr>
</div>
</template>

<script>
export default {
data() {
  return {
    res: [
      {
        id: 1,
        images: [
          {
            position: 0,
            image_path: "https://hoge.png" //positionが最小値なので、これを取り出したい
          },
          {
            position: 1,
            image_path: "https://fuga.png"
          },
        ],
      },
      {
        id: 2,
        images: [
          {
            position: 5,
            image_path: "https://piyo.png" //positionが最小値なので、これを取り出したい
          },
        ],
      },
    ]
  }
}
methods: {
  getImagePathByMinPosition() {
    // 作成すべき？ 
  },
</script>

上記で試してみたのですがCannot read property 'image_path' of undefinedエラーになってしまい、思う結果が得られませんでした。
methodを定義すべきか（作成しなくて済むものか、作成しないと叶わないのか）も、勘所がわからず...
申し訳ないのですが、お詳しい方、ご教示願えませんでしょうか。

Answer 1

Vueは詳しくないので、望むような回答でなければ申し訳ないのですが、たとえばこうするとどうですか？
{{ ( min = Math.min(...r.images.map(x => x.position)), r.images.filter( e => (e.position === min) )[0].image_path ) }}

Comments

[umino]

Lhankor_Mhyさん
さっそくのご回答、ありがとうございます。
教えていただいたように実行したところ、無事期待した出力を得ることができました。
他にも同じような挙動をさせたい箇所があるので、メソッドに切り出して使おうと思います。
意味を調べて、応用できるようにします、自分では解決できなかったので、大変助かりました。
ありがとうございました。

[Lhankor_Mhy]

お役に立てたようで何よりです。

Vueは詳しくないのですが、computed を使った方がいいのかもしれないですね。

[umino]

コメント気づくの遅れすみません、
確かにcomputedに切り出した方が使いやすいかな、と思い（いくつかの場所で同じ処理をしたいのもあり）、切り出しました。
おかげさまでtemplateがスッキリしました。
ご丁寧に、ありがとうございます。