vue.js 检测到重复键：'topic.ID'。这可能会导致更新错误。怎么了答案

【问题标题】：vue.js Duplicate keys detected: 'topic.ID'. This may cause an update error. What is Wrongvue.js 检测到重复键：'topic.ID'。这可能会导致更新错误。怎么了
【发布时间】：2018-07-09 11:13:28
【问题描述】：

为什么我收到此错误检测到重复键。在我的列表中，每个元素都有唯一 ID。我正在使用键也谢谢。

我的组件是

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

我的模板是

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

然后像这样渲染

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

并且数据ID是

ID:1

ID:2

ID:3

ID:5

ID:8

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

您没有动态绑定（v-bind）key 属性。

您正在使用key="topic.ID" 设置密钥，因此它被解析为普通字符串topic.Id。

所以改成v-bind:key="topic.ID"

【讨论】：