Vuetify中v-data-iterator传入API返回对象报错如何解决

• v-data-iterator的items属性仅接收数组类型入参，直接传入接口返回的普通对象，必然触发类型校验报错
• 之前尝试用Object.entries()转换失败，核心是两个问题：一是转换逻辑放错位置（模板表达式内无法直接访问全局Object构造函数），二是转换后返回的二维数组结构和模板渲染逻辑不匹配，没有映射为组件可识别的对象结构
• 初始状态把存接口返回值的exception初始值设为空数组，和实际返回的单对象类型不匹配，会导致首次渲染时出现取值异常

1. 调整数据源定义与转换逻辑 #

不要直接把原始接口对象传给组件，单独维护组件专用的数组数据源，原始对象保留用于头部等固定字段渲染：

import Axios from "axios";

export default {
  name: "UniqueException",
  data() {
    return {
      exception: {}, // 存储接口返回的原始对象，初始值改为空对象匹配类型
      exceptionList: [] // 专门给v-data-iterator使用的数组数据源
    };
  },

  mounted() {
    Axios.get("https://localhost:7121/api/exceptions/" + this.$route.params.id)
      .then((res) => {
        this.exception = res.data;
        // 接口返回后统一做对象转数组处理
        this.exceptionList = Object.entries(res.data)
          // 不需要渲染的字段在这里过滤即可，比如头部已使用的exceptionName可按需排除
          // .filter(([key]) => !['exceptionName'].includes(key))
          .map(([key, value]) => ({
            fieldKey: key,
            fieldValue: value
          }))
      })
      .catch((error) => {
        console.warn(error);
      });
  },
};

2. 调整模板绑定与渲染逻辑 #

将组件的items绑定到转换后的数组，遍历渲染时直接输出键名、键值即可实现两列布局，无需硬编码每个字段：

<template>
  <div>
    <v-container fluid>
      <v-data-iterator :items="exceptionList" hide-default-footer>
        <template v-slot:header>
          <v-toolbar class="mb-2" color="indigo darken-5" dark flat>
            <v-toolbar-title>{{ exception.exceptionName }}</v-toolbar-title>
          </v-toolbar>
        </template>

        <template v-slot:default="props">
          <v-row>
            <v-col
              v-for="item in props.items"
              :key="item.fieldKey"
              cols="12"
              sm="6"
            >
              <v-card>
                <v-list dense>
                  <v-list-item>
                    <!-- 左列填充键名 -->
                    <v-list-item-content>{{ item.fieldKey }}:</v-list-item-content>
                    <!-- 右列填充对应键值 -->
                    <v-list-item-content class="align-end">
                      {{ item.fieldValue }}
                    </v-list-item-content>
                  </v-list-item>
                </v-list>
              </v-card>
            </v-col>
          </v-row>
        </template>
      </v-data-iterator>
    </v-container>
  </div>
</template>

• Object.entries()直接调用返回的是[['producer', 'John'], ['director', 'Jane']]格式的二维数组，直接传入组件后无法通过对象属性名取值，必须映射为带明确键、值属性的对象数组
• 禁止在模板表达式内直接写Object.entries(exception)做转换，Vue模板的执行上下文无法直接访问全局构造函数，会触发方法未定义报错，所有数据转换逻辑必须放在script层处理完成后再传入模板
• 给v-col配置sm="6"即可实现小屏及以上尺寸的两列布局，配置md="4"/lg="3"可实现更大屏幕下的多列适配，按需调整属性即可

内容的提问来源于stack exchange，提问作者Narvath