Vue 项目中优雅处理枚举文本值：告别魔术数字，拥抱直观显示

vue.js

2024-03-01 16:38:43

Vue 项目中枚举文本值的优雅处理

背景

在 Vue 项目中，枚举是一种常见的用于表示固定值集合的数据结构。然而，当需要在 HTML 中显示枚举值时，往往会出现只显示数字值的情况，而不是更直观的文本值。

解决方案

为了解决这一问题，我们可以采用以下步骤：

1. 安装 lodash

首先，我们需要安装 lodash 库，它提供了一系列用于处理对象的实用函数：

npm install --save lodash

2. 创建获取枚举文本的函数

接下来，我们创建一个函数来获取给定枚举值的文本值。这个函数将使用 switch 语句来匹配枚举值并返回相应的文本：

const getMaritalStatusText = (status) => {
  switch (status) {
    case MaritalStatus.Single:
      return '单身';
    case MaritalStatus.Heartbroken:
      return '失恋';
    case MaritalStatus.Married:
      return '已婚';
    default:
      return '未知';
  }
};

3. 在 HTML 中使用函数

最后，我们在 HTML 模板中使用 getMaritalStatusText() 函数来获取每个联系人的婚姻状况的文本值：

<div v-for="contact in contacts" :key="contact.id">
  <span>{{ getMaritalStatusText(contact.maritalStatus) }}</span>
</div>

示例

以下是一个示例代码片段，展示了如何使用上述方法：

// Vue 组件
<template>
  <div>
    <div v-for="contact in contacts" :key="contact.id">
      <span>{{ getMaritalStatusText(contact.maritalStatus) }}</span>
    </div>
  </div>
</template>

<script>
import { find } from 'lodash';

export default {
  data() {
    return {
      contacts: [
        {
          id: 1,
          name: "Tony",
          age: 18,
          maritalStatus: MaritalStatus.Heartbroken,
          dateOfBirth: new Date(2006, 1, 2),
          occupation: "Software Engineer",
        },
        // 省略其他联系人
      ],
    };
  },
  methods: {
    getMaritalStatusText(status) {
      switch (status) {
        case MaritalStatus.Single:
          return '单身';
        case MaritalStatus.Heartbroken:
          return '失恋';
        case MaritalStatus.Married:
          return '已婚';
        default:
          return '未知';
      }
    },
  },
};
</script>