如何在 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实现)