polymerpolymer-starter-kitpolymer-3.x

Accessing elements in Polymer 3.0


Can't call a function. Can't access an element by this.$.id. I can do all of this in Polymer 2.0, but am trying to upgrade to Polymer 3.0.

ready() {
    super.ready();

    this.$.login.addEventListener('login', this.login);
    this.$.login.addEventListener('forgot-password', this.forgotPassword);
}

login(e) {
    const username = e.detail.username;
    const password = e.detail.password;

    auth.signInWithEmailAndPassword(username, password)
        .then(user => {
            // why doesn't this work
            this.getUserFromFirestore(user.uid);
        })
        .catch(error => {
            console.log(error);
            // why doesn't this work
            this.$.login.error = true;
        });
}

getUserFromFirestore(uid) {
    firestore.collection('users').doc(uid)
        .get()
        .then(doc => {
            let user = doc.data();
            console.log(user.role);
        })
        .catch(error => {
            console.log(error);
        });
}

Using Firebase Auth. That's working, but when I go to call my getUserFromFirestore function I'm getting a "TypeError: this.getUserFromFirestore is not a function"


Solution

  • I am just guessing ...

    Have you tried

    constructor () {
        this.login = this.login.bind(this);
    }
    

    ?