《Vue.js》Avoid using non-primitive value as key, use string/number value instead.のエラー解決方法

プログラミング

エラー整理+現状把握

vueのtemplate内でエラー発生

consoleに出力されたエラーは以下の2つ。

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

[Vue warn]: Duplicate keys detected: '[object Object]'. This may cause an update error.

このエラーの英文を解釈すると1つ目がno-primitiveの型は使えない。代わりにstring/int型を使えという意味。no-primitiveというワードはstringやintといった基本的なプログラミングの型のことを指します。2つ目が キーが重複しており、更新エラーを起こす可能性がある とのこと。配列の中身をfor文を回した時にキーが重複してしまっているようです。

for文の配列の中身

エラーの解決方法

indexの変数を設置してkeyに指定する

for文でkeyを指定するときはindexをfor文で取り出したい要素に加えて付けると、一意にkeyを定めることができるようです。

しっかりした基本の理解は参考書がオススメ

vueの勉強を始めたばかりの方は参考書を使って、1つ1つ丁寧に理解することをオススメします。長期的にみたらこの方がスキルアップしますよ。オススメの参考書を一冊紹介しておきますね。

 

タイトルとURLをコピーしました