콘솔 경고 : v-for로 렌더링 된 구성 요소 목록에는 명시 적 키가 있어야합니다.
여기에 문제가 있습니다. 코드에 무엇이 잘못되었는지 모르겠지만 콘솔에 경고가 표시됩니다.이 경고를 제거하려면 어떻게해야합니까?
[Vue tip] :
<todo-item v-for="todoItem in todos">: v-for로 렌더링 된 컴포넌트 목록에는 명시 적 키가 있어야합니다. 자세한 내용은 https://vuejs.org/v2/guide/list.html#key 를 참조 하십시오 .
(에서 찾았습니다<Root>)
index.html
<!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.js
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가 제안한 링크가 있습니다 . 나는 오류가 없다고 생각합니다. 경고를 해결하고 싶지만 원인이 어디인지 찾을 수 없습니다 .btw 저는 Vue의 초보자입니다.
답변은 링크 된 문서 에 명시 적으로 나열 되어 있습니다 .
<todo-item v-for="todoItem in todos"
v-bind:data="todoItem"
v-bind:key="todoItem.text"></todo-item>
To summarise some information from the comments below... you use :key to let the component know how to identify individual elements. This allows it to keep track of changes for Vue's reactivity.
It's best to try and bind the :key to some uniquely identifying property of each item. For example, an id.
My solution to a similar problem looked like this:
- <el-radio v-for="option in field.options"> ...
+ <el-radio v-for="(option, index) in field.options" :key="index"> ...
Or using v-bind syntax for index:
+ <el-radio v-for="(option, index) in field.options" v-bind:key="index"> ...
You can use any field of your data as a key. In addition you can use the default id. Furthermore you can define a "key" in your data as in the code below:
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>`
});
In the place of the key in the task.key you can put one of the field names including the hidden id.
'Programing' 카테고리의 다른 글
| GitHub 페이지 및 상대 경로 (0) | 2020.11.25 |
|---|---|
| RabbitMQ와 MSMQ 비교 (0) | 2020.11.25 |
| 잘못된 요청 구문이 아닌 논리적 오류에 대한 HTTP 400 (잘못된 요청) (0) | 2020.11.25 |
| Selenium은 기존 브라우저 세션과 상호 작용할 수 있습니까? (0) | 2020.11.25 |
| 앱이 백그라운드에있는 동안 푸시 알림으로 배지 업데이트 (0) | 2020.11.25 |