Vuejs Cannot read properties of undefined

Question

あるvueのexampleに下記コードがありました。

created() {
    this.selectedTeacher = this.$store.getters.teachers.find(i => `${i.id}` === this.$route.params.id)
}

iを見たくて下記のように変更しました。

created() {
    this.selectedTeacher = this.$store.getters.teachers.find(
        function(i){
            console.log(i);
            return i.id === this.$route.params.id
        }
    )
}

iは表示されたのですがreturn i.id === this.$route.params.idのところで下記エラーになりました。
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$route')

なぜ普通のfunctionにすると未定義のプロパティ(google翻訳)になるのでしょうか？
また、このエラーを回避する方法はありますか?

Answer 1

「store」内のファンクションとして実行しているため、「this」は想定しているインスタンスを指していないと思います。
参照したいインスタンスをあらかじめ変数にいれておくか、アロー関数としてコールバックを定義すると実行できませんでしょうか。

let self = this;
this.selectedTeacher = this.$store.getters.teachers.find(
    function(i){
        console.log(i);
        return i.id === self.$route.params.id
    }
)

or

this.selectedTeacher = this.$store.getters.teachers.find(
    (i) => {
        console.log(i);
        return i.id === this.$route.params.id
    }
)

Comments

[shiketa]

```diff
- () => {
+ (i) => {
```
では?

[takahashi-one]

回答ありがとうございます。提示していただいたコードを試しましたが
findの===の部分で全部falseになりreturnされるデータがひとつもなくなりエラーとなります。
調べたら下記のように型がちがっていました。
i.id が number
self.$route.params.id が string
どちらかをNumberかStringで型変換すればエラーはなくなりました。
元のコードでは === でOKなのですが
提示されたコードにするとなぜ型が違ってしまうのでしょうか？

[Matsumon0104]

>shiketaさん
ご訂正ありがとうございます。
提案ソースを修正します。

>takahashi-oneさん
「this.$route.params.id」が現状Stringということでしょうか？

海外フォーラムですが、「$route.params」の内容はURLパラメータなので、stringとされています。
https://stackoverflow.com/questions/70996660/is-there-way-to-type-route-params-in-vue-js

[takahashi-one]

たびたびありがとうございます。元のコードをみたら
i.id の部分が `${i.id}` でstringに変換されているということでしょうか。
なので === でOKというわけですね。ありがとうございました。

[Matsumon0104]

はい。ご認識の通り、テンプレートリテラルを利用すると、文字列として返されますので、「===」が成り立ちます。