如何在v模型中为基于类的组件使用getter和setter？

Question

我是vuejs的新手，我来自角度背景。我正在尝试将我的setter / getter绑定到v模型中以进行输入。但这并没有达到我的预期。但是，当我尝试将其直接绑定到变量时，它就可以正常工作。

以下是我的代码：

我的组件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的打字稿，所以并没有太大帮助。谁能给我指出正确的方向。

Answer 1

Reference

  

以_或$开头的属性不会在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);
    }
}