vue.js - 通过枚举常量进行多选条件渲染

Question

我对 Vue.js 非常陌生，所以请原谅这个基本问题。

使用 Vue 基于值显示文本标签的最简单(和/或推荐，和/或 DRY principle 兼容)方法是什么，我知道这只是一组有限值中的一个(例如，来自 Java 业务逻辑的枚举常量)？我的 Java 枚举当前具有以下定义(显然 Vue 不依赖于 Java，除了我的项目是这样构建的，并且这些常量在发送到 Vue View 时最终会转换为 JSON 字符串值):

public enum Color { BLACK, RED }

我在 .js 文件中设置了消息，如下所示:

export default {
en: {
    color: {
        red: 'Red',
        black: 'Black'
    },
...

在 View 模板中我当前使用以下内容:

...
<td>
  <v-layout>
    <v-flex>
      <div v-if="props.car.paint === 'RED'">{{ $t('color.red') }}</div>
      <div v-else>{{ $t('color.black') }}</div>
    </v-flex>
  </v-layout>
</td>
...

但是这是推荐的方式吗？福特先生现在已经做出了让步，允许他的汽车选择红色，而不仅仅是默认的黑色 - 但如果市场压力导致在选择中添加另一种颜色，消息文件和 View 都会添加模板文件必须更新。 是否可以这样做，以便将来只需要将新文本字符串添加到消息文件(而不是两个文件)？如何？

Answer 1

感谢 Phil 的 answer - 我决定不使用它，但他的“可能的改进”确实向我展示了一些我想要考虑的更多注意事项。

我最终决定提供一个简单的翻译方法(可以扩展，具体取决于需要改进的程度)。这将逻辑移至 JS 代码，同时相当简洁。

查看模板:

...
<td>
  <v-layout>
    <v-flex>
      <div>{{ colorText(props.car.paint) }}</div>
    </v-flex>
  </v-layout>
</td>
...

JS:

export default {
    ...
    methods: {
        colorText(color) {
            switch (color) {
                case 'RED':
                    return $t('color.red');
                case 'BLACK':
                default:
                    return $t('color.black');
            }
        },
    },
    computed: {
    ...
}