Vuejs - 使用 md-table 迭代检测到重复键

Question

我正在尝试为重复其 ID 的数据库对象显示 material table。

<md-table v-model="data">   
  <md-table-toolbar>
    <div class="md-toolbar-section-start">
      <h1 class="md-title">MyTitle</h1>
    </div>
    <md-field md-clearable class="md-toolbar-section-end">
      <md-input placeholder="Search..." v-model="search" @input="searchOnTable" />
    </md-field>
  </md-table-toolbar>
  <md-table-empty-state
    :md-label="grid.length < 1 ? 'Nothing here yet' : `No users with the term '${search}' found`">
  </md-table-empty-state>
  <md-table-row slot="md-table-row" slot-scope="{ item }" v-bind:key="`row-${item.id}-${data.indexOf(item)}`" :class="getClass(item)" md-selectable="single">
    <md-table-cell md-label="ID" v-if="user.role === 1" :key="data.indexOf(item)">{{item.id}}</md-table-cell>
    <md-table-cell md-label="Name">{{item.name}}</md-table-cell>
    <md-table-cell md-label="Type">{{item.type}}</md-table-cell>
    <md-table-cell md-label="User" v-if="user.role === 1">
      <span>
        <span v-if="user.role === 1 && !item.nameUser">
          -
        </span>
        <span v-if="item.nameUser">
          {{item.nameUser}}
        </span>
      </span>
    </md-table-cell>
    <md-table-cell md-label="Status">
      <span>
        {{getStatus(item.status)}}
      </span>
    </md-table-cell>
    <md-table-cell md-label="">
      <span>
        <md-button @click="start(item.id)" v-if="!item.status">
          HandleEval
        </md-button>
        <md-button :to="`/final/${item.id}`" v-else-if="(item.status === 2 || item.status === 3) && user.role === 1">
          FinishEval
        </md-button>
        <md-button :to="(eval_fase == 8) ? `/fase2/${item.id}/${item.user_evaluator_id}` : (eval_fase == 4) ? `/fin/${item.id}` : `/ev/${item.id}`" v-else-if="item.status === 8 || item.status === 1">
          Continuar avaliação
        </md-button>
        <md-button @click="remove(item.id)" v-if="!item.status || ((item.status === 2 || item.status === 3) && user.role === 1) || (item.status === 8 || item.status === 1)">
          <md-icon>delete</md-icon>
        </md-button>
      </span>
    </md-table-cell>
  </md-table-row>
</md-table>

问题是当我访问那个页面时，我得到这个错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: '62'. This may cause an update error.

found in

---> at src/components/MdTable/MdTable.vue at src/components/Grid.vue at src/components/MdContent/MdContent.vue at src/components/MdApp/MdAppContent.vue at src/components/MdApp/MdAppSideDrawer.vue at src/views/Grid.vue at src/App.vue

数据看起来像这样：

[
    {"date":"Thu, 10 Jun 2021 19:04:14 GMT","some_id":106,"id":210,"name":null,"nameUser":"Test","stage":null,"status":1,"status_form":0,"type":"compreensive","user_id2":4,"user_id":212},
    {"date":"Thu, 10 Jun 2021 19:04:14 GMT","some_id":107,"id":210,"name":null,"nameUser":"Option","stage":null,"status":1,"status_form":0,"type":"compreensive","user_id2":13,"user_id":212},
    {"date":"Thu, 10 Jun 2021 19:04:14 GMT","some_id":108,"id":210,"name":null,"nameUser":"Test2","stage":null,"status":1,"status_form":0,"type":"compreensive","user_id2":20,"user_id":212},
    {"date":"Thu, 10 Jun 2021 19:04:14 GMT","some_id":109,"id":210,"name":null,"nameUser":"Tester","stage":null,"status":1,"status_form":0,"type":"compreensive","user_id2":61,"user_id":212},
]

Answer 1

基于源代码中的line and this one，尝试md-model-id="some_id"

<md-table v-model="data" md-model-id="some_id">

由于此道具采用默认值 id 也用作键，因此在您的情况下 id 具有相同的值。

Vuejs - 使用 md-table 迭代检测到重复键

Vuejs - Duplicate keys detected using md-table iteration

vue.js

material-design