forループ内のフィルタ配列が警告をスローするVueJS

Question

これは問題であるか間違っているのか分かりません。 VueJSを使用すると、v-forの中にフィルタリング機能があり、正常に動作しますが、コンソールに警告がスローされます。thisは問題の最小例です。

他の配列からリレーショナルデータをフィルタリングする必要があるため、配列を返す関数getClan（）が必要なので、最初の要素のデータを使用する必要があります。これまでのところは良いが、V-ためのループが終了したときに、私はこの警告ました：いくつかの理由がcodepenのローカルコンソール上に表示されていないため

[Vue warn]: Error in render function: "TypeError: this.clans.filter(...)[0] is undefined"  

メッセージが、私は推測している、ChromeとFirefoxのコンソールに表示されますこれは何とか警告から隔離されています。

警告はforループの最後でのみ発生し、より大きなデータセットを試してみると同じことが起こります。

計算されたプロパティを使用することを考えますが、それらに引数を渡すことはできません。

Answer 1

この問題は、配列フィルタが何も一致しない場合に発生します。存在しない戻り値の最初のインデックスにアクセスしようとします。 codepenまたはjsfiddleは（SOのスニペットツールがすべてを行いように自己完結型ではなく、外部のサービスに応じて、質問をしてください、今後の参考のため

getClan(x) { 
    var clan = this.clans.filter(clan=>clan.id==x) 
    if (clan.length > 0) { 
     return clan[0].name 
    } else { 
     return "Peasant" 
    } 
}