Vue2+Typescript中v-for用可选链报Property 'index'不存在如何解决？

v-for指令要求遍历的目标必须是数组/对象/可迭代类型，当你使用order?.order_lines时，如果order为undefined，可选链返回的结果是undefined，Typescript无法为undefined的遍历目标推导正确的循环变量类型，就会出现index不存在之类的类型报错。如果直接写order.order_lines，则会直接触发order可能为undefined的类型警告。

方案1：外层增加v-if判断（最推荐） #

先判断order存在后再渲染列表，从逻辑上排除undefined的情况，同时可以配套加载状态提升用户体验：

<template>
  <div class="wrapper">
    <ul v-if="order" class="card-desc">
       <li v-for="(l, index) in order.order_lines" :key="index">
       {{ index + 1 }}. {{ l.product.product_name }}
       </li>
    </ul>
    <!-- 订单加载中展示 -->
    <div v-else>订单数据加载中...</div>
  </div>
</template>

方案2：计算属性兜底返回空数组 #

单独把订单明细拆成计算属性，不存在时返回空数组，遍历目标永远是合法的数组类型：

// 组件内新增计算属性
get orderLines(): OrderLine[] {
  return this.order?.order_lines ?? []
}

模板直接遍历该计算属性即可：

<li v-for="(l, index) in orderLines" :key="index">

方案3：模板内直接兜底空数组 #

如果不想新增计算属性，也可以直接在v-for的遍历目标处加空值合并兜底：

<li v-for="(l, index) in order?.order_lines ?? []" :key="index">

不要使用非空断言order!.order_lines来强制绕过类型检查，该写法忽略了order为undefined的运行时场景，异步加载未完成时会触发实际的运行时报错。另外你当前代码中created钩子内的handleOrderDataAsync是注释状态，实际使用时需要放开调用才会请求订单数据。

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