Vue渲染报错：实例未定义但渲染时被引用，寻求解决方案

核心问题分析 #

你遇到的报错根源有两个：

1. 模板引用了未在实例中定义的变量
   模板里直接使用的horse_name并未在Vue实例的data或props中声明。你给<a-col>绑定的:horse_name="horse_show_name_prop"是向子组件传递属性（若<a-col>支持该自定义prop），但当前组件模板无法直接访问这个属性，应直接使用实例上的horse_show_name_prop。

2. data初始化语法错误
   data()中的horse_show_name_prop:,存在语法问题，多了逗号且未初始化值，会导致实例初始化异常。

修复步骤 #

步骤1：修正data初始化 #

将horse_show_name_prop改为合法的初始化格式：

data() {
  return {
    sireDetailsData: [],
    horse_show_name_prop: undefined, // 初始化值并移除多余逗号
  }
},

步骤2：修改模板变量引用 #

把模板里的horse_name全部替换为horse_show_name_prop（这才是当前Vue实例的变量）：

<a-col
  :span="6"
  :md="6"
  align="middle"
  style="margin-right: 0px;"
>
  <p
    class="m-0 text-sm font-bold center"
    style="min-width: 0px;"
    v-if="horse_show_name_prop !== undefined"
  >
    {{ horse_show_name_prop }}%
  </p>

  <p
    class="m-0 text-sm font-bold center"
    style="min-width: 0px;"
    v-else
  >
    -
  </p>

  <a-tag
    class="ant-tag-primary font-semibold text-xs"
    style="min-width: 30px;margin-right: 0px;"
  >
    Win %
  </a-tag>
</a-col>

（注：若<a-col>确实需要horse_name这个prop，可保留:horse_name="horse_show_name_prop"，但模板的判断和插值必须用实例自身的horse_show_name_prop）

步骤3：优化异步逻辑（可选） #

如果sireName是普通props而非Promise，无需使用await，直接取值即可；同时用可选链操作符简化嵌套取值逻辑：

async created () {
  const psireName = this.sireName; // 移除await，除非sireName是异步返回的Promise

  console.log(psireName)

  try {
    const response = await sireDetails.fetchHorseIndex(psireName);
    this.sireDetailsData = response.data;

    // 用可选链替代内层try-catch，层级不存在时自动返回undefined
    this.horse_show_name_prop = this.sireDetailsData[0]?.horse_details[0]?.horse_show_name;
  } catch (error) {
    console.error(error);
  }
},

额外说明 #

你推测的渲染顺序问题，本质是异步数据未返回时模板引用了未初始化的变量，但当前核心错误是变量引用错误。修正后，Vue会在horse_show_name_prop更新后自动触发重新渲染，异步加载逻辑即可正常工作。

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