Question

为什么我会收到此错误？检测到重复的密钥。在我的列表中，每个元素都有唯一的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

Answer 1

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

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

因此将其更改为v-bind:key="topic.ID"

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

1 个答案: