Vue+TypeScript迭代Poliza接口数组遇类型分配错误求助

错误原因 #

1. v-for指令语法错误：HTML模板里错误给v-for加了冒号（:v-for），冒号是Vue动态绑定属性的语法，而v-for是内置指令，不需要加冒号。加冒号后Vue会把它当成动态属性，尝试解析"poliza in polizas"这个字符串表达式，直接引发类型匹配错误。
2. API返回数据未做类型断言：Axios返回的response.data默认是any类型，直接赋值给声明为Poliza[]的polizas时，TypeScript无法确保数据结构完全匹配接口定义，可能导致类型推断异常。

解决方法 #

1. 修正v-for语法 #

移除v-for前面的冒号，恢复正确指令写法，同时把硬编码内容替换为动态绑定的属性值，实现真正的遍历展示：

<div v-for="poliza in polizas" :key="poliza.id" class="table-row">
  <div class="table-cell">{{ poliza.id }}</div>
  <div class="table-cell">{{ poliza.tipo }}</div>
  <div class="table-cell">{{ poliza.vigente ? 'VIGENTE' : 'NO VIGENTE' }}</div>
  <div class="table-cell"><button>Descargar</button></div>
</div>

2. 给API返回数据添加类型断言 #

在赋值时显式将response.data断言为Poliza[]类型，确保TypeScript能正确识别数据结构：

async getPolizas() {
  axios.get(`https://localhost:7006/api/Pagos/All`, {
    headers: {
      Authorization: `Bearer ${this.token}`
    }
  }).then((response) => {
    if (response.status === 200) {
      console.log(response.data)
      // 显式断言返回数据类型
      this.polizas = response.data as Poliza[]
    }
  });
},

额外说明 #

poliza.id是number类型，符合Vue对:key的类型要求（string | number | symbol），这部分无需修改，只要接口定义的id字段正常返回，就不会有问题。

内容的提问来源于stack exchange，提问作者Jesus Castañeda