vue.js Duplicate keys detected: ‘topic.ID’. This may cause an update error. What is Wrong

Asked By: Anonymous

why i am getting this error Duplicate keys detected.in my list every element have Unique ID.and i am using Key also thanks.

My Component is

Vue.component('list-topic',
    {
        props: ['topic'],
        template: "#topicTemplate"
    });

and my template is

<script id="topicTemplate" type="text/html">
<div class="row" style="border-bottom: 1px solid #ccc;">
    <div class="col-sm-6">
        <span class="vc"><i class="material-icons">swap_vert</i> &nbsp;&nbsp; {{topic.typeName}}</span>
    </div>
    <div class="col-sm-2">
        <span class="vc">{{topic.type}}</span>
    </div>
    <div class="col-sm-2">
        <i v-if="topic.Visible==true" class="vc material-icons icon-success">done</i>
        <i v-if="topic.Visible==false" class="vc material-icons icon-danger">close</i>
    </div>
    <div class="col-sm-2">
        <span :data-typeOrder="topic.typeOrder" :data-type="topic.type" :data-typeID="topic.typeID" onclick="TopicDeleteDom(this)" class="btn btn-link btn-danger btn-just-icon remove">
            <i class="material-icons">close</i>
        </span>
    </div>
</div>

And rendering like this

<div id="topicAddSortable">
                        <list-topic v-for="topic in List" v-bind:topic="topic" key="topic.ID"></list-topic>
                    </div>

and Data id is

ID:1

ID:2

ID:3

ID:5

ID:8

Solution

Answered By: Anonymous

You are not dynamically binding(v-bind) the key attribute.

You are setting the key using key="topic.ID", so it is resolved as a normal string topic.Id.

So change it to v-bind:key="topic.ID"