如何在 i18n Vue 中添加空字符串规则

Question

我有一个使用 vue-i18n 的 vue 应用程序，以及一些为表头设置标签的动态组件，其中一些为空白，问题是我收到警告：

[intlify] Not found '' key in 'en' locale messages.

该表基于：

//template 
<th v-for="header in headers" class="text-center">
  {{ $t(header.label) }}
</th>

//script

const header = [
  { label: "sector", show: "always" },
  { label: "price", show: "left" },
  { label: "", show: "right" },
  { label: "forecastTicket", show: "right" },
  { label: "forecastSales", show: "right" },
  { label: "ticketPrice", show: "right" },
  { label: "elasticity", show: "right" },
  { label: "", show: "left" },
];

由于某些表格标签是空字符串，我不想修改所有表格以使用或不使用翻译功能

我尝试添加消息：

['']: ''

我找到的解决方案是将空白字符串更改为“--empty--”之类的内容，但我想用空标签保持其干净，这可能吗？

Answer 1

一个简单的检查就可以完成这项工作：

{{ header.label == '' ? '' : $t(header.label) }}

Answer 2

您可以只检查

label

是否为空，而不是添加规则。

<template>
  <th v-for="header in headers" class="text-center">
    {{ header.label.length ? $t(header.label) : "" }}
  </th>
</template>

从性能角度来看，效率更高，因为您不必调用另一个函数。