🎈 이 기사는 WP 전용입니다
htps //wp. 메 / pc9 HC-GF

전치

li를 사용하여 부모의 ul에 의해
안의 텍스트를 바꾸고 싶다!
라고 하는 경우에 편리한 key 속성을 소개🌟
component②의 계속입니다 🙋‍♀️

ul, ol, table, select 등의 요소에는
자식 요소가 될 수 있는 태그 li, tr, option
정해져 있네요.
이들을 나누어 컴포넌트화하고 싶을 경우에
활약하는 것이 key입니다.

공식 : https://kr.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에서 확인하세요 👀
htps //wp. 메 / pc9 HC-GF