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

Vue.js

エラー整理+現状把握

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を定めることができるようです。

番外編:働くエンジニアにおすすめアイテム3撰

記事の内容とは別に、日々エンジニアの業務を行う上で役に立っているアイテムを紹介します。どれも実際に使って良いと思ったものだけ紹介していますのでその点はご安心ください。

目の保温マッサージ

毎日使っている目の保温マッサージ機です。使うと翌日の疲労感が全く違います。1日中PCと睨めっこの人は今すぐ購入することを強くお勧めします。

座っている時の負担を減らす

このサポート座布団を購入してからデスクワークの疲労が激減しました。価格も安く購入しやすいのでコスパ最強です。現在職場でも愛用しています。

自宅での作業効率をあげる椅子

ゲーミングチェアを購入して、自宅での作業効率が最大化しました。座った途端集中モードに入ります。家で作業する人は絶対に買っておきたいアイテムです。

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。スキルの高いエンジニアは極々当たり前にしっている知識だとおもいますが、そうでない方はエンジニアとして最低限知らないとまずい知識ですのでどこかで購入し、読むことをお勧めします。

筆者
筆者

今回の記事の内容は以上で終了です。最後まで読んでくれてありがとうございます。また技術、経済、株式投資などのことを Twitter でも呟いていますので良かったらフォローよろしくお願いします。

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