🎈 この記事は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に使う値については
こちらをご覧ください👀
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