Transitioning from an angular background to vuejs has been challenging for me as a newbie. I've encountered issues while trying to bind setter/getter in v-model for an input field. Interestingly, when I directly bind it to a variable, everything works just fine.
Here is the code snippet that reflects my approach:
The TypeScript file for My Component:
import { Component, Vue } from 'vue-property-decorator';
@Component({
components: {}
})
export default class MyComponent extends Vue {
private _username: string = '';
private _password: string = '';
get username(): string {
return this._username;
}
set username(value: string) {
this._username = value;
}
get password(): string {
return this._password;
}
set password(value: string) {
this._password = value;
}
public login() {
console.log(this.username, this.password);
}
}
The Vue file for MyComponent:
<template>
<form @submit.prevent="login">
<v-text-field
v-model="username"
label="Username"
required>
</v-text-field>
<v-text-field
v-model="password"
:type="'password'"
label="Password"
required>
</v-text-field>
<v-btn large type="submit">Login</v-btn>
<v-btn large>Reset</v-btn>
</form>
</template>
Despite initializing the variables with empty strings, I'm still unable to see the values of username and password displayed in the console upon typing into the input fields. Instead, all I get is undefined undefined. The documentation hasn't been much help either, especially since I'm using typescript with vue-class-component. Any guidance on how to resolve this issue would be greatly appreciated.