Vueと共通

【Nuxt.js】props応用編: v-forでの使用

前置き

propsの記事はたくさん書いていますが、
これは結構エラーの原因に
気づきにくいかも…😵
と思ったのでご紹介❗️

しっかりとデータの型を確認すれば
落ち着いて対処できるなと
再確認できたのと、
初心者には結構分かりにくい部分かな❓
とも思いました。。。

使ってそうで
意外と使ってなかった
v-forでのprops🍀

コンポーネント分けと
データの型に気をつけながら
読み進めてください📚


やりたかったこと

ul>liをコンポーネント分けして
親のpagesでデータを渡したい❗️
ListNews.vueで
ListItemNews.vueを
v-forで繰り返す時に
あれ?と疑問に思ったのです。

データは親でArrayにして、
それぞれのliObjectにしたい🤔💭

directory

components/
--| molecules/
----| ListItemNews.vue
--| organisms/
----| ListNews.vue

pages/
--| index.vue


正しいコード

リンク先は文字列と
変数を使いたいので
テンプレートリテラルで。

注目ポイントはここです❗️
propsの受け渡しは
v-forを使わない通常パターンなら
:news="newses"とするわけですが、
:news="news"になります。

propsの型をしっかりチェックすれば
わかる方も多いと思いますが、
初めて使おうとすると、
「あれ?」となりました🐤

仕組みがわかれば良いので、
今回はデータ1個で。


間違いコード

注目ポイントと書いたこの部分
<ListItemNews v-for=“news in newses” :key=“news.id” :news=“news” />
:news="newses"
としていました。

検証でチェック

:news="newses"にした場合
どうなるかというと

Vueの検証ツールだと
ListItemNewsに
きちんとデータが行き渡っています👀
consoleのエラーが出ているので
そちらも見ていきます。

consoleのエラーはこちら
型がObjectのはずなのに
渡しているのはArrayですよ、
となっているわけです。

ListItemNewsには
オブジェクトが渡れば良いのですが、
:news="newses"にすることで
配列を渡してしまっているのです。


渡したいデータを再確認する

親でのデータと見比べてみます。
newses[ {0}, {1}, {2}… ]
newsesnewsオブジェクトのまとまりです。
news in newsesでオブジェクトの1つを
newsと定義しています。
ListItemNewsはその1つ、newsです❗️


まとめ

今回はコンポーネントが2つなので
分かりやすいですが、
これが3つ、4つと増えると
エラーで該当コンポーネントが出てても
propsって何だっけ…?」
「そもそも型これでいいの…?」
と非常に混乱しました💥😂笑

データの流れや型を整理し、
スッキリ解決できました💫

-Vueと共通
-,

© 2021 aLiz Nuxt