0

我正在关注 Polymerfire 的代码实验室和第一次修补，想将登录元素从使用 google 登录更改为使用电子邮件/密码。

该元素有效，但我在尝试访问元素本身之外的电子邮件/密码字段的值时遇到了麻烦。

我原以为我可以通过引用 this.$.login.email.value 来访问电子邮件文本字段的值，但这不起作用。

这是我的代码

登录元素

<dom-module id="as-login">
<template>    
<!-- Here we stick in our login fields -->
<paper-input id="email" label="Email"></paper-input>
<paper-input id="password" label="Password" type="password"></paper-input>

<paper-button id="login" on-tap="signIn" disabled="[[disabled]]">
<iron-icon icon="account-circle"></iron-icon>
<span>Sign in</span>
</paper-button>
</template>
<script>

Polymer({
is: 'as-login',

properties: {
disabled: {
type: Boolean,
reflectToAttribute: true,
value: false
},

signedIn: {
type: Boolean,
reflectToAttribute: true,
value: false
}
},

signIn: function() {
this.fire('sign-in', null, { bubbles: false });
},

clearEmail: function() {
this.$.email.value = "";
},

clearPassword: function() {
this.$.password.value = "";
},

getEmail: function() {
return(this.$.email.value);
},

getPassword: function() {
return(this.$.password.value);
},
});
</script>
</dom-module>

这是应用程序元素

<as-login
id="login"
on-sign-in="signIn"
signed-in="[[signedIn]]"
disabled="[[!online]]">
</as-login>

<script>
Polymer({
is: 'as-app',
behaviors: [Polymer.AsAppBehaviour],
signIn: function() {
console.log("Let one sign in");

// Process sign in promise
this.$.auth.signInWithEmailAndPassword(this.$.login.getEmail(), this.$.login.getPassword())
.then(function(res) {
console.log("We signed in");
})
.catch(function(err) {
console.log("We got an error");
});
},

signOut: function() {
console.log("Let one sign out");
this.$.auth.signOut();
}
});
</script>
4

1 回答 1

0

建议使用数据绑定 - 查看属性、值

<paper-input id="email" label="Email" value="{{email}}"></paper-input>
<paper-input id="password" label="Password" type="password" value="{{password}}"></paper-input>

可以像这样在您的 JS 中访问值（而不是通过 dom 访问值，this.$.login.email.value）

getEmail: function() {
    return this.email;
},

getPassword: function() {
    return this.password;
},
于 2017-08-01T02:35:27.953 回答