link2603 link2604 link2605 link2606 link2607 link2608 link2609 link2610 link2611 link2612 link2613 link2614 link2615 link2616 link2617 link2618 link2619 link2620 link2621 link2622 link2623 link2624 link2625 link2626 link2627 link2628 link2629 link2630 link2631 link2632 link2633 link2634 link2635 link2636 link2637 link2638 link2639 link2640 link2641 link2642 link2643 link2644 link2645 link2646 link2647 link2648 link2649 link2650 link2651 link2652 link2653 link2654 link2655 link2656 link2657 link2658 link2659 link2660 link2661 link2662 link2663 link2664 link2665 link2666 link2667 link2668 link2669 link2670 link2671 link2672 link2673 link2674 link2675 link2676 link2677 link2678 link2679 link2680 link2681 link2682 link2683 link2684 link2685 link2686 link2687 link2688 link2689 link2690 link2691 link2692 link2693 link2694 link2695 link2696 link2697 link2698 link2699 link2700 link2701 link2702 link2703 link2704 link2705 link2706 link2707 link2708 link2709 link2710 link2711 link2712 link2713 link2714 link2715 link2716 link2717 link2718 link2719 link2720 link2721 link2722 link2723 link2724 link2725 link2726 link2727 link2728 link2729 link2730 link2731 link2732 link2733 link2734 link2735 link2736 link2737 link2738 link2739

[Vue.js] Console warning component lists rendered with v-for should have explicit keys

I got a problem here, I don’t know what is wrong in my code, but I got a warning in my console, how can I remove this warning?

[vue.js tip]: <todo-item v-for=”todoItem in todos”>: component lists rendered with v-for should have explicit keys. See for more info.
(found in <Root>)


<!DOCTYPE html>
<meta charset=”utf-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<title>vue.js Tutorial</title>
<link rel=”shortcut icon” href=”">
<script src=”scripts/vue.js”></script>
<section id=”app”>
<p>{ msg }</p>
<p v-bind:title=”message”>
Hover the mouse over me for a few seconds to see my dynamically bound title!
<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>
<li v-for=”todo in todos”>
{ todo.text }
<p>Total count: { todos.length }</p>
<div v-bind:title=”reverseMessageText”>
<p>{ reverseMessageText }</p>
<button v-on:click=”reverseMessage”>Reverse Message</button>
<p>Data binding: <strong>{ nameOfUser }</strong></p>
<input type=”text” v-model=”nameOfUser”>
<todo-item v-for=”todoItem in todos” v-bind:data=”todoItem”></todo-item>
<script src=”scripts/app.js”></script>


var appComponent = Vue.component(‘todo-item’, {
template: ‘<li>id: { }<br>text: { data.text }</li>’,
props: [

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’;


Here is the link that vue.js suggested here. I think i don’t have any error, to solve that warning but I cannot find where’s the cause, btw I’m newbie here to Vue.

Solution :

The answer is listed explicitly in the documentation you linked…

<todo-item v-for=”todoItem in todos”

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.

Solution 2:

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”> …