[Nuxt.js]URLから取得したidと同じkeyをもつオブジェクトの、別の要素を表示させたい

Question

こんにちは。Nuxt.js初学者です。

こちらの記事・箇所を参考に、Nuxt.jsでURLの数値に応じた要素を表示させたいともがいています。

あらかじめ用意しておいたデータ（users）から、URLの末尾の数字（1〜3）と一致するidを持つオブジェクトのnameを取り出してresultに代入、URLの数値に応じて表示させるnameを動的に変える…ということをしたいはずでした。

見本では下記のようになっていたのですが同じようにしても動かず、というかconputedはデフォルトではgetterなので代入はできないのでは？と自分なりに調べて書いてみたのですが、何時間も悩んだ末ギブアップしました。
もしわかる方がいらっしゃれば、ご教示いただけないでしょうか。

バージョン：　@nuxt/cli v2.15.6

初心者ゆえ、言葉足らずな箇所などあったらすみません。

よろしくお願いします。

---

▼見本のコード

<template>
    <h1>ユーザID: {{ user.name }}</h1>
</template>

<script>
export default {
    data(){
        return {
            id: this.$route.params.id,
            users: [
                { 
                    id: 1, name: 'John Doe'
                },
                {
                    id: 2, name: 'Kevin Smith',
                },
                {
                    id: 3, name: 'Harry Bosch'
                },
            ],
        }
    },
    computed:{
        user(){
            return this.users.find(user => user.id == this.id);
        } 
    }
}
</script>

▼自分のコード

<template>
  <div>
    <v-container>
      <h1>User ID: {{ result }}</h1>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
      users: [
        {
          id: 1,
          name: 'Joe',
        },
        {
          id: 2,
          name: 'Ryo',
        },
        {
          id: 3,
          name: 'Momo',
        },
      ],
      result: '',
    }
  },
  computed: {
    user: {
      get() {
        console.log(this.result)
        return this.result
      },
      set(v) {
        const result = ''
        const key = ''
        let i = 0
        for (i in this.users) {
          if (this.id === i.id) {
            this.result = i.name
          }
        }
      },
    },
  },
}
</script>

Answer 1

result自体をcomputedにしてやれば動的に切り替わるはずです。
またparamsのidのユーザーが存在しない場合は、findの返り値はundefinedになるのでそこも考慮する必要があるかと思います。

<template>
  <div>
    <v-container>
      <h1>User ID: {{ result }}</h1>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
      users: [
        {
          id: 1,
          name: 'Joe',
        },
        {
          id: 2,
          name: 'Ryo',
        },
        {
          id: 3,
          name: 'Momo',
        }
      ]
    }
  },
  computed: {
    result () {
     const targetUser = this.users.find(({ id }) => String(id) === this.id)
     return targetUser?.name ?? 'ユーザーが存在しません'
    }
  }
}
</script>

Comments

[k_a]

`this.$route.params`はstring型なので、toStringをつける、もしくは定義をstring型にしないとだめなような気がします。

```
this.users.find(({ id }) => id.toString() === this.id)
```

or

```
{
id: '1',
name: 'Joe',
}
```

[taku-hu]

ご指摘ありがとうございます。

確かにその通りでした、回答を修正させていただきます。

[happyylemon]

どうも、ありがとうございます。動きました！まだ全て消化しきれていませんが、色々試して動きを確かめてみます。本当にありがとうございました。