如何在 Vue 项目 HTML 中添加和插入枚举文本值？

Question

我有一个名为 MaritalStatus 的枚举：

enum MaritalStatus {
  Single,
  Heartbroken,
  Married,
}

以及包含该枚举的对象数组 （顺便说一句，这是一个打字稿项目）：

const contacts: Contact[] = [
  {
    id: 1,
    name: "Tony",
    age: 18,
    maritalStatus: MaritalStatus.Heartbroken,
    dateOfBirth: new Date(2006, 1, 2),
    occupation: "Software Engineer",
  },
  {etc.}
]

这是我的 HTML 中唯一重要的部分：

<div
  v-for="contact in contacts"
  :key="contact.id"
>
  <span class="my-2">{{ contact.maritalStatus }}</span>
</div>

显示此信息时，我会得到一个姓名列表，其下方显示数字 0-2。显然我想显示的是“单身”、“已婚”或“伤心欲绝”的文字。

我该怎么办？谢谢！

Answer 1

这是因为

typescript

会自动将自动递增的数值分配给引擎盖下的枚举键。您有 2 个选择：

使用赋值：

enum MaritalStatus {
    Single = "Single",
    Heartbroken = "Heartbroken".
    Married = "Married"
}

或者使用索引访问器访问值：

martialStatus: MaritalStatus[MaritalStatus.Heartbroken]