Vue component에 두 개의template 이하 태그가 존재하고 v-for를 사용할 때
Nuxt + Vuetify.js에서 만나다
Vuetify로 list 제작시
v-list
사용v-list
내에서 전개된 기초는 v-list-item
뿐만 아니라v-divider
도 있다.Vuetify뿐만 아니라 Vue로component 파일을 만들 때 두 개의template 이하의 라벨이 존재하는 경우도 흔하다.
두 개의template 이하의 라벨은 다음과 같은 쓰기 방법이 있다
<template>
<h1>タイトル</h1>
<p>本文</p>
</template>
다음 오류 메시지가 표시됩니다.Errors compiling template: Cannot use as component root element because it may contain multiple nodes.
v-for로 돌아가지 않는 일반component에 두 개의 탭이 있는 경우 아래와 같이 div1개로 묶으면 오류가 발생하지 않습니다
<template>
<div>
<h1>タイトル</h1>
<p>本文</p>
</div>
</template>
v-for로 배열 회전을 하고 싶을 때div에게 프로포즈를 건네주고 싶다.<template>
<div v-for="item in items">
<h1>タイトル</h1>
<p>本文</p>
</div>
</template>
그런데 위에 쓰는 방법은요.Errors compiling template: Cannot use v-for on stateful component root element because it renders multiple elements.
이런 착오가 생기다.
v-for 회전용div를 다시div로 동그라미를 치면 틀리지 않습니다.
<template>
<div>
<div v-for="item in items">
<h1>タイトル</h1>
<p>本文</p>
</div>
</div>
</template>
오류는 없었지만 역겹고...component를 삽입한 것에 따라 div로 둘러싸기 싫은 경우도 있는데...
참고로 Vuetify
v-item
에서 하면 다음과 같은 느낌으로...<template>
<div>
<div v-for="item in items">
<v-list-item>
<v-list-item-content>
<v-list-item-title>
タイトル
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
</div>
</div>
</template>
다음은 v-list
component에 연결해 조금 더 좋아 보이는 내용이다.이런 문법이라면 comple 후
.v-list-item
의div에 추가role="listitem"
되기 때문에 더 좋을 수 있습니다.<template>
<v-list>
<div v-for="item in items">
<v-list-item>
<v-list-item-content>
<v-list-item-title>
タイトル
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
</div>
</v-list>
</template>
Reference
이 문제에 관하여(Vue component에 두 개의template 이하 태그가 존재하고 v-for를 사용할 때), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/ayumiko/articles/ede7e01351da6ba64198텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)