콘솔 주의: v-for로 렌더링된 구성 요소 목록에 명시적 키가 있어야 함
여기에 문제가 있습니다.코드에 무슨 문제가 있는지 모르겠지만 콘솔에 경고가 떴습니다.이 경고를 삭제하려면 어떻게 해야 합니까?
[Vue 팁] :
<todo-item v-for="todoItem in todos">: v-for로 렌더링된 구성 요소 목록에는 명시적 키가 있어야 합니다.상세한 것에 대하여는, https://vuejs.org/v2/guide/list.html#key 를 참조해 주세요.
(에 있습니다.<Root>)
index.displaces를 표시합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Tutorial</title>
<link rel="shortcut icon" href="https://vuejs.org/images/logo.png">
<script src="scripts/vue.js"></script>
</head>
<body>
<section id="app">
<p>{{ msg }}</p>
<p v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound title!
</p>
<div>
<p v-if="seen">This text will show or hide if the button was clicked.</p>
<button type="button" v-on:click="isSeen">{{ isSeenText }}</button>
</div>
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
<p>Total count: {{ todos.length }}</p>
<div v-bind:title="reverseMessageText">
<p>{{ reverseMessageText }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<div>
<p>Data binding: <strong>{{ nameOfUser }}</strong></p>
<input type="text" v-model="nameOfUser">
</div>
<div>
<ol>
<todo-item v-for="todoItem in todos" v-bind:data="todoItem"></todo-item>
</ol>
</div>
</section>
<script src="scripts/app.js"></script>
</body>
</html>
app.module
var appComponent = Vue.component('todo-item', {
template: '<li>id: {{ data.id }}<br>text: {{ data.text }}</li>',
props: [
'data'
]
});
new Vue({
el: '#app',
data: {
msg: 'Hello World!',
message: 'You loaded this page on ' + new Date(),
seen: true,
isSeenText: 'Now you don\'t',
todos: [
{
text: 'Learn JavaScript'
},
{
text: 'Learn Vue'
},
{
text: 'Build something awesome'
}
],
reverseMessageText: 'Hello World from Vue.js!',
nameOfUser: 'John Rey'
},
methods: {
reverseMessage: function() {
this.reverseMessageText = this.reverseMessageText.split('').reverse().join('');
},
isSeen: function() {
this.seen = !this.seen;
this.isSeenText = this.seen ? 'Now you don\'t' : 'Now you see me';
}
}
});
console.log
여기 Vue가 제안한 링크가 있습니다.오류는 없는 것 같아요.그 경고를 해결하고 싶은데 원인이 어디에 있는지 모르겠어요.Vue에 처음 왔어요.
<todo-item v-for="todoItem in todos"
v-bind:data="todoItem"
v-bind:key="todoItem.text"></todo-item>
아래 코멘트에서 몇 가지 정보를 요약하면...사용하다:key컴포넌트에 개별 요소를 식별하는 방법을 알려줍니다.이를 통해 Vue의 반응성 변화를 추적할 수 있습니다.
가장 좋은 방법은 v-interface에 바인드하는 것입니다.:key각 항목의 고유하게 식별되는 특성으로 이동합니다.예를 들어,id.
유사한 문제에 대한 저의 해결 방법은 다음과 같습니다.
- <el-radio v-for="option in field.options"> ...
+ <el-radio v-for="(option, index) in field.options" :key="index"> ...
또는 사용v-bind의 구문.index:
+ <el-radio v-for="(option, index) in field.options" v-bind:key="index"> ...
데이터의 모든 필드를 키로 사용할 수 있습니다.또한 기본 ID를 사용할 수 있습니다.또한 아래 코드와 같이 데이터에 "키"를 정의할 수 있습니다.
Vue.component('task-list', {
template: `
<div><slot>
<task v-for="task in tasks" :key="task.key"> {{task.description}}</task>
</slot></div>
`,
data () {
return {
tasks: [
{description:"Go to market", completed:false, key:"asd"},
{description:"Wake up ", completed:true, key:"rty"},
{description:"Sleep", completed:false, key:"terw"},
{description:"Have breakfast", completed:true, key:"jdr"},
]
};
},
});
Vue.component('task', {
template: `<li><slot></slot></li>`
});
태스크에서 키 대신.키는 숨겨진 ID를 포함한 필드 이름 중 하나를 입력할 수 있습니다.
언급URL : https://stackoverflow.com/questions/42476942/console-warning-component-lists-rendered-with-v-for-should-have-explicit-keys
'programing' 카테고리의 다른 글
| VueX 변환 최적화 (0) | 2022.08.15 |
|---|---|
| 상위 페이지에 속하는 Nuxtjs 페이지 구성 요소에 정의되지 않은 변수입니다. (0) | 2022.08.15 |
| Vue 구성 요소 이름은 소문자여야 합니까? (0) | 2022.08.15 |
| java.displaces를 클릭합니다.Out Of Memory Error: GC 오버헤드 제한을 초과했습니다. (0) | 2022.08.15 |
| Java에서 클래스를 사용하는 방법 (0) | 2022.08.15 |