Console warning: component lists rendered with v-for should have explicit keys
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"> ...
The answer is listed explicitly in the documentation you linked...
<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
.