🎈 この記事はWP専用です
https://wp.me/pc9NHC-GF

前置き

liを使いまわして親のulによって
中のテキストを変えたりしたい！
というような場合に便利なkey属性をご紹介🌟
component②の続きです🙋‍♀️

ul、ol、table、selectといった要素には
子要素にできるタグli、tr、optionが
決まっていますね。
これらを分けてコンポーネント化したい場合に
活躍するのがkeyです。

公式: https://jp.vuejs.org/v2/guide/components.html#DOM-テンプレートパース時の警告

keyに使う値については
こちらをご覧ください👀

【Nuxt.js】Nuxt文法編：v-for

tableでいうならthは親、
trを子コンポーネントに分けると
管理がしやすいといったメリットもあります💡

コード①

liタグに使うコンポーネントは
is属性で指定してあげます🌟

ListItem.vue

<template>
 <li>{{ text }}</li>
</template>

<script>
export default {
 props: ['text']
}
</script>

index.vue

<template>
 <div class="page">
   <ul>
     <li
       is="ListItem"
       v-for="(fruit, index) in fruits"
       :text="fruit"
       :key="index"
     >
       {{ fruit }}
     </li>
   </ul>
 </div>
</template>

<script>
import ListItem from '~/components/Lists/ListItem.vue'

export default {
 data () {
   return {
     fruits: ['りんご', 'みかん', 'ぶどう'],
   }
 },
 components: {
   ListItem,
 },
}
</script>

コード②

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-GF