通过枚举常量进行多选条件渲染

Question

我非常Vue.js新手，所以请原谅这个基本问题。

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

public enum Color { BLACK, RED }

我在 .js 文件中设置了如下消息：

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

在我目前使用的视图模板中：

...
<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>
...

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

Answer 1

我会简单地执行以下操作：

export default {
en: {
    color: {
        RED: 'Red',
        BLACK: 'Black'
    },
...

...
<td>
  <v-layout>
    <v-flex>
      <div>{{ $t(`color.${props.car.paint}`) }}</div>
    </v-flex>
  </v-layout>
</td>
...

可能的改进：

添加一些颜色存在的验证
如果您不喜欢大写的翻译键，您可以使用字典，将大写的颜色映射到翻译键。

Answer 2

感谢 Phil 的 - 我决定不使用它，但他的 "Possible improvements" 确实向我展示了一些我想考虑的更多注意事项。

我最终决定提供一个简单的翻译方法（可以扩展，具体取决于需要改进多少）。这将逻辑移至 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: {
    ...
}

通过枚举常量进行多选条件渲染

Multiple-choice conditional rendering by enum constant

enums

vue.js

vuetify.js

vue-i18n