vue.js检测到重复的密钥:'topic.ID'.这可能会导致更新错误.怎么了

Question

为什么我收到此错误检测到重复的密钥.在我的列表中每个元素都有唯一ID.我也在使用Key也谢谢.

我的组件是

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

Answer 1

您没有动态绑定(v-bind)该key属性.

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

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