VueJS 3中v-for循环时如何优雅处理字段名转换？

你尝试的field.toLowerCase() as keyField in fields写法不符合Vue的v-for语法规范，所以无法生效。以下几种方案可以实现你想要的简洁写法：

方案一：使用计算属性预处理字段（推荐） #

在组件的计算属性中，把原fields转换成包含原字段名和小写键的对象数组，这样模板里就能直接使用转换后的键：

// 组件脚本部分
computed: {
  processedFields() {
    return this.fields.map(field => ({
      original: field,
      key: field.toLowerCase()
    }))
  }
}

<!-- 模板部分 -->
<tr v-for="item in items" :key="item">
  <td v-for="field in processedFields" :key="field.original">
    {{ item[field.key] }}
  </td>
</tr>

方案二：定义工具方法转换字段 #

如果不想用计算属性，可以定义一个方法来处理字段转换，模板里调用方法获取键：

// 组件脚本部分
methods: {
  getKey(field) {
    return field.toLowerCase()
  }
}

<!-- 模板部分 -->
<tr v-for="item in items" :key="item">
  <td v-for="field in fields" :key="field">
    {{ item[getKey(field)] }}
  </td>
</tr>

方案三：模板内临时变量（不推荐，仅作参考） #

通过<template>标签和临时循环来定义转换后的变量，写法稍显繁琐，适合临时场景：

<tr v-for="item in items" :key="item">
  <td v-for="field in fields" :key="field">
    <template v-for="keyField = field.toLowerCase(); _ in [1]">
      {{ item[keyField] }}
    </template>
  </td>
</tr>

以上方案中，计算属性的方式性能最优，也最符合Vue的代码组织规范，建议优先使用。

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