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

Posted

技术标签:

【中文标题】如何在 v-model 中为基于类的组件使用 getter 和 setter?【英文标题】:How to use getters and setters in v-model for class based component? 【发布时间】: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 都不工作。如果还没有回答,我会在明天带着我的电脑时尝试。 【参考方案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);
    

【讨论】:

以上是关于如何在 v-model 中为基于类的组件使用 getter 和 setter?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 vue-class 中为 v-model 使用计算属性?

基于Element-plus封装配置化表单组件(组件的v-model实现)

基于Element-plus封装配置化表单组件(组件的v-model实现)

如何在rest框架中为我的注册视图编写登录视图?

Vue组件间传值 v-model

如何在 vue 3 脚本设置中的组件上使用 v-model