Vuejs2 Vue.js/Axios-列表中的结果重复。在v-for中具有唯一的键

在单独的组件中，我还有两种v-for的用法。他们有时也会出错。所有三个v-for调用都用v-if/else包装。下面是生成重复关键帧错误并两次渲染数据的代码：

AccountDashboard.vue

<tbody>
  <tr v-if="!residents.length" class="table-info">
    <td class="text-center">
      <p>
        No residents on record. 
      </p>
    </td>
  </tr>
  <template v-else>
    <tr is="AccountResidentList"
      v-for="resident in residents"
      v-bind:key="'resident-list-' + resident.id"
      v-bind:first_name="resident.first_name"
      v-bind:last_name="resident.last_name"
      v-bind:dob="resident.dob | date_formatted"
      >
    </tr>
  </template>
</tbody>

<template>
  <tr class="AccountResidentList">
    <td>
      {{ this.$attrs.id }}
    </td>
    <td>
      {{ this.$attrs.first_name }} {{ this.$attrs.last_name }}
    </td>
    <td>
      {{ this.$attrs.dob }}
    </td>
    <td>
      <button @click="toResidentProfile({account_id, id})" class="btn btn-sm btn-purple btn-with-icon">
        <div class="ht-25">
         <span class="icon wd-25"><i class="fa fa-eye"></i></span>
         <span class="pd-x-10">view</span>
       </div>
      </button>
    </td>
    <!--TODO: Add view profile button-->
  </tr>
</template>

 <script>
 import Axios from "axios";
 import router from "../../router";
 import { mapGetters } from "vuex";
 import moment from "moment";

 export default {
  name: "AccountResidentList",
  computed: {
    ...mapGetters['Resident', {
      resident: 'getResident'
    }]
  },
  filters: {
    date_formatted: (date) => {
      return moment(date).format('MMMM Do, YYYY');
    }
  },
  methods: {
    toResidentProfile(account_id, resident_id) {
      router.push(`/accounts/${account_id}/residents/${resident_id}`)
    }
  },
};
 </script>
 <style scoped></style>

注意：Account操作#setResidents只调用将一个驻留添加到列表总数的mutator

即state.list.push（常驻）

我将响应记录到控制台，可以确认数据没有从我的Axios调用发送两次（或更多）

我已审查并尝试了以下内容，但均无效：

最后，应该提到的是，我尝试过使用/不使用

模板

来包装列表，包括/不包括

模板

中的for循环，等等

没想到迭代一个集合会如此麻烦

我是否忽略了一些显而易见的事情

更新：什么对我有用

<tbody>
  <tr v-if="!residents.length" class="table-info">
    <td class="text-center">
      <p>
        No residents on record. 
      </p>
    </td>
  </tr>
  <template v-else>
    <tr is="AccountResidentList"
      v-for="resident in residents"
      v-bind:key="'resident-list-' + resident.id"
      v-bind:first_name="resident.first_name"
      v-bind:last_name="resident.last_name"
      v-bind:dob="resident.dob | date_formatted"
      >
    </tr>
  </template>
</tbody>

<template>
  <tr class="AccountResidentList">
    <td>
      {{ this.$attrs.id }}
    </td>
    <td>
      {{ this.$attrs.first_name }} {{ this.$attrs.last_name }}
    </td>
    <td>
      {{ this.$attrs.dob }}
    </td>
    <td>
      <button @click="toResidentProfile({account_id, id})" class="btn btn-sm btn-purple btn-with-icon">
        <div class="ht-25">
         <span class="icon wd-25"><i class="fa fa-eye"></i></span>
         <span class="pd-x-10">view</span>
       </div>
      </button>
    </td>
    <!--TODO: Add view profile button-->
  </tr>
</template>

 <script>
 import Axios from "axios";
 import router from "../../router";
 import { mapGetters } from "vuex";
 import moment from "moment";

 export default {
  name: "AccountResidentList",
  computed: {
    ...mapGetters['Resident', {
      resident: 'getResident'
    }]
  },
  filters: {
    date_formatted: (date) => {
      return moment(date).format('MMMM Do, YYYY');
    }
  },
  methods: {
    toResidentProfile(account_id, resident_id) {
      router.push(`/accounts/${account_id}/residents/${resident_id}`)
    }
  },
};
 </script>
 <style scoped></style>

我需要访问resident.id，而且paren中声明的id看起来像一个索引。下面我们来看看是什么删除了重复的渲染错误，并允许我在修复重复的关键帧错误后访问居民的id：

<template v-else>
  <tr is="AccountResidentList"
    v-for="(resident, id) in residents"
    v-bind:key="id"
    v-bind:id="resident.id"
    v-bind:first_name="resident.first_name"
    v-bind:last_name="resident.last_name"
    v-bind:dob="resident.dob | date_formatted"
  >
  </tr>
</template>

---

再次感谢@Billal Begueradj的帮助

对我来说，我怀疑在

居民

中有相同id的条目。因此，我们必须找到解决此问题的方法。我们可以进行以下有效的尝试：

<tr 
  is="AccountResidentList"
  v-for="(resident, id) in residents"
  :key="id"
  // rest of your code

---

尝试：
v-for=“（居民，id）在居民中”：key=“'id”
@Billal Begueradj+1快速响应！这适用于我的所有迭代。如果你把这个作为回答，我会接受的。非常感谢：）我的重复密钥错误消失了，但是对于您使用相同id的条目，我的列表现在呈现了两次。插图（console.log的图像）显示了每个在场居民的唯一id。当ping我的服务器时，有什么原因会改变吗？重复密钥错误消失了。我的列表一直在复制，直到我允许绑定的密钥充当id。在修复双重渲染之前，我也绑定了id，导致了重复。删除此项并使用密钥返回所需的结果。很难理解Account.js中的代码，尤其是如果没有可测试的代码，我可以尝试。但是，尝试一下：1。在AccountDashboard.vue中，将
is=“AccountResidentList”
替换为
class=“AccountResidentList”
。2.ProviderAccountList.vue，删除``和
@sirramongabriel如果我的答案没有帮助，你可以取消接受，这样希望其他人可以深入查看你的代码