Question

在单独的组件中，我还使用了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>

请注意键绑定中唯一的ID尝试。

这里是子组件的外观

ProviderAccountList.vue

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

我的Axios呼叫看起来像：

Account.js （具有命名空间的vuex模块）

  async retrieveAccount(context, account_id) {
      // Axios.defaults.headers.common['Authorization'] = 'Bearer ' + window.$cookies.get('jwt')
      let response
      let valid_id = window.$cookies.get('valid_id');
      response = await Axios.get(`http://localhost:3000/api/v1/providers/${valid_id}/accounts/${account_id}`, { headers: { 'Authorization': 'Bearer ' + window.$cookies.get('jwt') } })
      .then((response) => {
        let account = response.data.locals.account;
        let account_address = response.data.locals.account_address;
        let residents = response.data.locals.residents;
        // set Account
        context.dispatch('Account/setId', account.id, {root: true});
        context.dispatch('Account/setProviderId', account.provider_id, {root: true});
        .
        .
        .

        // set AccountAddress
        // !Array.isArray(array) || !array.length
        if (account.address) {
          context.dispatch('Account/setAddressId', account_address.id, {root: true});
          context.dispatch('Address/setId', account_address.id, {root: true});
        .
        .
        . 

        // set AccountResidents
        // !Array.isArray(array) || !array.length
        residents.forEach(resident => {
          if (resident) {
            // Add object to parent's list
            context.dispatch('Account/setResidents', resident, {root: true});         // Set attr values for object
            context.dispatch('Resident/setId', resident.id, {root: true});
            .
            .
            .
            (remaining attrs removed for brevity)
          }
        })

        router.push(`/providers/${account.provider_id}/accounts/${account_id}`);
      })
      .catch(function(error) {
        console.log(error);
      })

注意：“帐户”操作#setResidents只是调用将一个居民添加到列表总计的mutator。

i.e state.list.push(resident)

我将响应记录到控制台，并可以确认没有从我的Axios呼叫中两次（或多次）发送数据。

我已经审查并尝试了以下尝试，但无济于事：

最后，应该提到的是，我尝试使用/不使用template来包装列表的变体，包括/不包括template中的for循环，等等。

没想到迭代一个集合会很麻烦。

我可以忽略一些明显的东西吗？

更新：对我有用的

我需要访问resident.id，而且在括号中声明的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的协助！

Answer 1

对我来说，我怀疑在residents中存在具有相同ID的条目。因此，我们必须找到一种方法来克服这个问题。我们可以如下进行有效的尝试：

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

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

1 个答案: