私は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>
そして、ここに app 要素があります
<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>