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

前置き

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

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

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

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

やりたかったこと

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

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

正しいコード

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

<template>
  <li class="list-item list-item-news">
    <nuxt-link :to="`/news/${news.slug}`" class="news-link">
      <div class="news-info">
        <h3 class="news-ttl">
          {{ news.text }}
        </h3>
      </div>
    </nuxt-link>
  </li>
</template>

<script>
export default {
  props: {
    news: {
      type: Object,
      required: true,
    },
  },
}
</script>

<style lang="scss" scoped>
.list-item-news {
}
</style>

<nuxt-link :to="`/news/${news.slug}`" class="news-link">

</h3>

</div>

</nuxt-link>

</li>

</template>

export default {

props: {

news: {

type: Object,

required: true,

}

</script>

.list-item-news {

}

</style>

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

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

<template>
  <ul class="list list-news-simple">
    <ListItemNews v-for="news in newses" :key="news.id" :news="news" />
  </ul>
</template>

<script>
export default {
  props: {
    newses: {
      type: Array,
      required: true,
    },
  },
}
</script>

<style lang="scss" scoped>
.list-news-simple {
}
</style>

</ul>

</template>

export default {

props: {

newses: {

type: Array,

required: true,

}

</script>

.list-news-simple {

}

</style>

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

<template>
  <div class="page">
    <ListNews :newses="newses" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      newses: [
        {
          text: 'テキスト',
          slut: '_id.vue',
        },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.page {
}
</style>

</div>

</template>

export default {

data() {

return {

newses: [

{

text: 'テキスト',

slut: '_id.vue',

}

</script>

.page {

}

</style>

間違いコード

注目ポイントと書いたこの部分
<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}… ]
newsesはnewsオブジェクトのまとまりです。
news in newsesでオブジェクトの1つを
newsと定義しています。
ListItemNewsはその1つ、newsです❗️

まとめ

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

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