Take a look at the code snippet below:
import { Vue, Component } from "vue-property-decorator";
@Component({
components: {}
})
export default class ProductViewingAndEditingPage extends Vue {
private readonly componentsReferencesIDs: {
productTitleInputField: string;
productPriceInputControl: string;
} = {
productTitleInputField: "ProductTitle--InputField",
productPriceInputControl: "ProductPrice--InputComponent"
};
private readonly productDataFormValidator: InputsGroupValidator = new InputsGroupValidator({
controls: {
[this.componentsReferencesIDs.productTitleInputField]:
this.$refs[this.componentsReferencesIDs.productTitleInputField],
[this.componentsReferencesIDs.productPriceInputControl]:
this.$refs[this.componentsReferencesIDs.productPriceInputControl]
}
});
}
@typescript/eslint raises an issue with @typescript-eslint/no-invalid-this (as it does not comply with ESLint's no-invalid-this, but rather understands class fields).
Reflections on Possible Solutions
If I were to make componentsReferencesIDs a static class field, it would no longer be possible to retrieve values from the vue template.
Due to the nature of being a class field, arrow functions cannot be utilized here. Additionally, aliasing this would lead to complications with the no-this-alias rule.
I acknowledge that ESLint is not the ultimate authority. However, I seek justification such as "due to 〈argument〉, this ESLint rule may not cover this specific scenario."