如何在基于类的组件的 v-model 中使用 getter 和 setter？

Question

我是 vuejs 的新手，我来自 angular 背景。我正在尝试在 v-model 中绑定我的 setter/getter 以进行输入。但这并不像我打算的那样工作。但是当我尝试将它直接绑定到变量时，它工作正常。

以下是我的代码：

我的组件 TS 文件：

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);
    }
}

MyComponent Vue 文件：

<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>

我希望在控制台中显示在相应字段中输入的用户名和密码值。但我得到的只是undefined undefined（即使我已将变量初始化为空字符串）。我确实阅读了文档，但没有太大帮助，因为我使用的是带有 vue-class-component 的 typescript。任何人都可以请指出我正确的方向。

Answer 1

参考

以 _ 或 $ 开头的属性不会在 Vue 实例上代理，因为它们可能与 Vue 的内部属性和 API 方法冲突。您必须以 vm.$data._property 的形式访问它们。

简单地不要使用 _ 前缀来解决问题。

import { Component, Vue } from 'vue-property-decorator';

@Component({
    components: {}
})
export default class MyComponent extends Vue {
    private xusername: string = '';
    private xpassword: string = '';


    get username(): string {
        return this.xusername;
    }

    set username(value: string) {
        this.xusername = value;
    }

    get password(): string {
        return this.xpassword;
    }

    set password(value: string) {
        this.xpassword = value;
    }

    public login() {
        console.log(this.username, this.password);
    }
}