Binding VueJS methods to Firebase promises can be done by using the `bind` method

How do I properly bind VueJs methods scope to a returned Firebase Promise so that I can call the VueJS Modal?


login: function () {
    fireAuth.signInWithEmailAndPassword(this.signIn.email, this.signIn.password)
        .then(function (user) {
            if (!user.emailVerified) {
                this.$modal.show('email_verification', {
                    text: 'Please verify your email'
                })
            }
        }, function (error) {
            console.log(error.message);
        })
}

However, I am encountering the following error:

TypeError: Cannot read property '$modal' of undefined

javascriptfirebasevue.jsfirebase-authentication

Answer №1

Ensure this is bound correctly by using arrow functions in promise callbacks.

login: function () {
            fireAuth.signInWithEmailAndPassword(this.signIn.email, this.signIn.password)
                .then( (user) => {
                    if (!user.emailVerified) {
                        this.$modal.show('email_verification', {
                            text: 'Please verify your email'
                        })
                    }
                },  (error) => {
                    console.log(error.message);
                })
        }

An alternative approach is to declare a variable named self pointing to the vue instance and use it within the method for proper binding.

login: function () {
           var self = this;
            fireAuth.signInWithEmailAndPassword(this.signIn.email, this.signIn.password)
                .then(function (user) {
                    if (!user.emailVerified) {
                        self.$modal.show('email_verification', {
                            text: 'Please verify your email'
                        })
                    }
                }, function (error) {
                    console.log(error.message);
                })
        }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to retrieve a particular field from a Firestore Document using JavaScript?

Within my Firestore database, I have a structure of users that looks like this: https://i.sstatic.net/jgeCq.png The rules set up for this database are as follows: match /users/{userID} { match /public { allow read: if request.auth != nu ...

javascriptfirebasegoogle-cloud-platformgoogle-cloud-firestorenext.js

Exploring the functionality of a Vue component designed solely through a template

I currently have a basic Vue application set up: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'& ...

javascriptvue.jsvue-component

Ensure that a string contains only one instance of a specific substring

I need a function that removes all instances of a specific substring from a string, except for the first one. For example: function keepFirst(str, substr) { ... } keepFirst("This $ is some text $.", "$"); The expected result should be: This $ is some tex ...

javascriptstringtypescript

Skipping the created hook in Vue Test Utils is a useful feature that allows

Is there a way to skip all the methods called within the created() hook? Instead of: created() { this.getAllocations(); this.getModels(); this.getTeams(); this.getCustodians(); this.getD ...

vue.jsjestjsvue-test-utils

Issue with vue-emoji-picker: The import of const from the vuex module is not producing the expected outcome

Looking to enhance the emoji set in vue-emoji-picker using this code snippet from https://codepen.io/DCzajkowski/pen/gObWjEQ I've made some progress with this integration. Everything loads correctly, except for the "RECENT" section not being added to ...

vue.jsvuejs2vuexemojivuex-modules

Eliminate an element based on its class identifier

Remove certain classes from a variable without altering the HTML element itself. I struggle to explain concisely, so please refer to my example HTML: <div id="test" class="layout ui-resizable ui-droppable"> <div class="ui-resizable-handle ...

javascriptjquery

Exploring the functionalities of radio buttons and arrays in a Javascript experiment

Currently delving into the world of Javascript and struggling to wrap my head around creating a test using only pure Javascript (no jQuery). The goal is to: Present users with a question and provide radio button options for selection. Allow users to cho ...

javascripthtmlvalidationradio-button

Implementing src attribute to HTML5 audio tag utilizing angularjs

Currently, I am in the process of creating a music website and facing an issue where I need to pass the name of the file when the user clicks on the music cover image to the HTML5 audio tag. My approach involves playing songs using PHP, but it requires a p ...

javascriptangularjsbootstrap-4

Executing Statements in a Specific Order with Express and Sqlite3

I am having an issue creating a table and inserting an item into it using the node command. Despite my efforts to reorganize my script, the item is being inserted before the table is created. Interestingly, manually inputting the commands in sqlite3 works ...

javascriptexpresssqlitenode-sqlite3

The Architecture of a Node.js Application

I'm curious about the efficiency of my nodejs app structure in terms of performance optimization. My main concern lies in how I handle passing around references to my app object across modules. Basically, in my app.js file, I define all my dependenci ...

javascriptnode.jsexpressrestify

What is the best way to incorporate alternating classes into a dynamic feed of thumbnail images?

I am integrating a YouTube user's video channel feed onto a webpage using two plugins called jYoutube and jGFeed. If you are interested in the plugins I mentioned, here they are: jGFeed: jYoutube: However, I have encountered an issue with the im ...

javascriptjqueryyoutuberssfrontend

Exploring the capabilities of Vue JS to dynamically update data and model bindings within form

I need help creating a form that allows users to edit their comments. The challenge is to display the current value of the comment using dynamic data from v-for, while also binding the value to a model for sending it with a patch request. Here is an examp ...

javascriptvue.jsdata-binding

Error: SVG variable not found in react-native-react-apexchart library for React Native

Error: The module "node_modules\react-apexcharts\dist\react-apexcharts.min.js" is causing an exception: ReferenceError: SVG variable not found I have researched this error, but I could not find a proper solution. Here is my package.json fil ...

javascriptreactjsreact-nativemobile-developmentreact-apexcharts

Storing key-value pairs in Firebase with Swift for safekeeping

This question is a follow up from: Post Array to firebase Database in Swift I am attempting to store various ingredients within a recipe and later retrieve the complete recipe with all its ingredients intact. Following the guidance provided in the aforeme ...

iosswiftdictionaryfirebasefirebase-realtime-database

Interactive Treegrid with Search Functionality in Bootstrap Table

As a newcomer to Javascript, I am facing challenges in implementing a searchable feature for the following treegrid. Simply inserting the method data-search="true" within the <table> tags does not yield the expected results. Only the paren ...

javascriptbootstrap-4bootstrap-table

What is the safest way for a function within a JavaScript hash to invoke another function in the same hash?

Below is a JavaScript/ES6 method that returns a hash with two methods - writeA and _write. The goal is to call writeA from outside of the hash, but this method needs to call _write, defined right below it, to complete its task. getHash = () => { re ...

javascriptnode.jshashmapecmascript-6

Increasing the values of id attributes in AngularJS

Here is an example of some HTML code: <tr ng-repeat="x in y"> <td> <div ng-attr-id="{{getId()}}"></div> </td> <td> <div ng-attr-id="{{getId()}}"></div> </td> <t ...

javascriptangularjsincrement

Is it possible to navigate to the same route using the navigator in a React Native app?

One of my challenges involves a view called DynamicView. I am attempting to navigate to the same view (DynamicView) using different parameters in the navigator. this.props.navigator.push({ component: DynamicView, params: {} //Different params }) . ...

javascriptreactjsreact-nativereact-redux

Confusion Arises When Joomla Buttons Clash

I am facing an issue with two modules on my website, each containing a button code. The code for the buttons is as follows: First Button <div onclick="parent.location='first-link'" data-mce-onclick=""><button class="button">First Bu ...

javascriptphphtmlbuttonjoomla

The Protractor option is nowhere to be found on the Run Configuration popup window in Eclipse

Issue with Protractor in Eclipse: Unable to locate Protractor option on Run Configuration popup. Despite following the steps outlined in http://www.protractortest.org/#/ and this guide on configuring Protractor with Eclipse (specifically the 2 Answer step ...

javascripteclipseselenium-webdriverwebdriverprotractor