将常量导入 Vue 组件

Question

我正在用 Vue 和 TypeScript 编写一个应用程序。我正在重构一些东西，现在我正在将一些我在模板中硬编码的字符串移动到一个单独的常量中。

我所做的是：

export const validationError: ValidationError = {
  lastname: 'lastname error',
  address: 'address error',
  age: 'age error',
};

interface ValidationError {
  lastname: string;
  address: string;
  age: string;
}

然后我将它导入到我的组件中：

import { validationError } ../validation/validationError';

并尝试像这样使用它：

<p>{{ validationError.age }}</p>

但我遇到了问题，即：Property or method "validationError" is not defined on the instance but referenced during render...

我已经尝试在我的组件中设置一个“数据”值，通过编写

_validationError = validationError;

在我的基于类的组件中，但我遇到了同样的错误。如何使这个恒定的反应？我是否以正确的方式来解决这个问题——我应该以不同的方式分解这些常量吗？

Answer 1

您说您尝试过_validationError = validationError，这意味着您必须在模板中使用它，如下所示：<p>{{ _validationError.age }}</p>。

我会省略下划线，而直接使用以下内容：

public validationError = validationError;