Currently working on developing an application using Vue and TypeScript. I'm focused on refactoring some aspects, particularly moving hard-coded strings from a template to a separate constant.
What has been implemented is as follows:
export const validationError: ValidationError = {
lastname: 'lastname error',
address: 'address error',
age: 'age error',
};
interface ValidationError {
lastname: string;
address: string;
age: string;
}
Subsequently, the constant is imported into my component:
import { validationError } from '../validation/validationError';
Attempting to utilize it in this way:
<p>{{ validationError.age }}</p>
Encountering issues, specifically:
Property or method "validationError" is not defined on the instance but referenced during render...Various attempts have been made, such as setting a "data" value in the component by defining
_validationError = validationError;In the class-based component, yet facing the same error. How can I make this constant reactive? Is the current approach correct, or should constants like these be handled differently?