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

【问题标题】：How to use getters and setters in v-model for class based component?如何在 v-model 中为基于类的组件使用 getter 和 setter？
【发布时间】：2019-10-23 00:33:25
【问题描述】：

我是 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 的打字稿。谁能指出我正确的方向。

【问题讨论】：

非常有趣，甚至 getter 都不工作。如果还没有回答，我会在明天带着我的电脑时尝试。

标签： typescript vue.js vuetify.js

【解决方案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);
    }
}

【讨论】：