Currently working on upgrading from vue 2 to vue 3 and encountering an error with the @Component decorator:
"Decorators are not valid here.ts(1206) (alias) Component(options: Vue.ComponentOptionsBase<Vue, any, any, any, any, any, any, any, string, {}, {}, string> & ThisType & ThisType): (target: VC) => VC (+1 overload) import Component"
Showcasing my code below.
<script setup>
import { Component, Vue } from "vue-property-decorator";
import apiService from "@/shared/services/apiService";
import { validationMixin } from "vuelidate";
import { required, email } from "vuelidate/lib/validators";
import dirtyValidatorService from "@/shared/services/dirtyValidatorService";
@Component({
mixins: [validationMixin],
validations: {
userName: {
required,
},
email: {
required,
email,
},
},
})
export const ForgotPassword = () => {
userName: string = "";
email: string = "";
showSuccessMessage: boolean = false;
showErrorMessage: boolean = false;
dirtyValidatorRefNo: number = 0;
dirtyValidationConfirmation: boolean = false;
errorMessage: string = "";
created = () => {
this.dirtyValidatorRefNo = dirtyValidatorService.setInitialModel(
this.dirtyValidatorRefNo,
{ userName: this.userName, email: this.email }
);
}
SendForgotPasswordEmail = (isFormInvalid: boolean) =>{
if (!isFormInvalid) {
this.$store.dispatch("storeIsBusyValue", true);
apiService
.sendPostRequest("Account", "ResetPasswordEmail", {
userName: this.userName,
email: this.email,
})
.then((response) => {
this.showErrorMessage = !response.data.isSuccess;
this.showSuccessMessage = response.data.isSuccess;
this.errorMessage = !response.data.isSuccess
? response.data.message
: "";
this.$store.dispatch("storeIsBusyValue", false);
});
}
}
}
</script>
If you have a solution for this issue, kindly provide it. Thank you!