不断收到错误“未在实例上定义但在渲染期间被引用”

Question

将我的数据组件绑定到模板后，我不断收到以下错误。任何帮助，将不胜感激。

脚本：

data() {
  return {
    sireDetailsData: [],
    horse_show_name_prop:,
  }
},

async created () {
  const psireName = await this.sireName;

  console.log(psireName)

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

    this.sireDetailsData = response.data;

    try {
      this.horse_show_name_prop = this.sireDetailsData[0].horse_details[0].horse_show_name
    } catch (error) {
      this.horse_show_name_prop = undefined
    }
  } catch (error) {
    console.error(error);
  }
},

模板：

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

在进行一些实时更改后，数据就会加载进来。这让我觉得事情呈现出了乱序。

Answer 1

您需要在数据中声明horse_name：

       data() {
            return {
                sireDetailsData: [],
                horse_show_name_prop:,
                horse_name: '', // Add horse_name here
            }
        },