Trying to assign a property to an undefined variable inside a function

Question

Trying to assign a property to an undefined variable inside a function

At the moment, I am configuring error messages on a login page for an extension using vue, and encountering issues within the importCreds() function.

data(){
    return {
    url:'',
    apikey:'',
    error:'',
    }
},
methods:{
    accountSummaryButton(){
        if (localStorage.getItem("accounts") == null)
            this.error = 'There are no available accounts.';
        }
        else
            // STUFF
    },
    saveLogin(event){
        let app = this;
        if (!app.getAccountData(app.url,app.apikey,this.method))
            this.error = 'An error has occurred, please check Url and API Key.';
        else {
            //STUFF
        }
    },
    importCreds(){
        let app = this;
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
            chrome.tabs.sendMessage(
                tabs[0].id,
                {action: "import_creds"},
                function(response) {
                    if (response){
                        app.url = response.affiliateurl
                        app.apikey = response.apikey
                    } else
                        this.error = 'Go to your affiliate site.';
                }
            );
        });
    },
},

Is there a straightforward way that I might be overlooking to access error in this function?

javascript vue.js undefined typeerror

Answer 1

Answer №1

The importCreds function still refers to the original this object, but the

chrome.tabs.query({}, function(tabs) {})

does not. To maintain that reference, you can assign this to a variable like (let app = this), and then use app.error.

data () {
    return {
      url: '',
      apikey: '',
      error: '',
    }
},
methods: {
    accountSummaryButton () {
        if (localStorage.getItem("accounts") == null) {
            this.error = 'There are no available accounts.';
        } else {
            // STUFF
        }
    },
    saveLogin (event) {
        let app = this;

        if (!app.getAccountData(app.url,app.apikey,this.method)) {
            this.error = 'An error has occured, please check Url and API Key.';
        } else {
            // STUFF
        }
    },
    importCreds () {
        let app = this;

        chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
            chrome.tabs.sendMessage(
                tabs[0].id,
                { action: "import_creds" },
                function(response) {
                    if (response) {
                        app.url = response.affiliateurl
                        app.apikey = response.apikey
                    } else {
                        app.error = 'Go to your affiliate site.';
                    }
                }
            );
        });
    },
},

Answer 2

The importCreds function still refers to the original this object, but the

chrome.tabs.query({}, function(tabs) {})

does not. To maintain that reference, you can assign this to a variable like (let app = this), and then use app.error.

data () {
    return {
      url: '',
      apikey: '',
      error: '',
    }
},
methods: {
    accountSummaryButton () {
        if (localStorage.getItem("accounts") == null) {
            this.error = 'There are no available accounts.';
        } else {
            // STUFF
        }
    },
    saveLogin (event) {
        let app = this;

        if (!app.getAccountData(app.url,app.apikey,this.method)) {
            this.error = 'An error has occured, please check Url and API Key.';
        } else {
            // STUFF
        }
    },
    importCreds () {
        let app = this;

        chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
            chrome.tabs.sendMessage(
                tabs[0].id,
                { action: "import_creds" },
                function(response) {
                    if (response) {
                        app.url = response.affiliateurl
                        app.apikey = response.apikey
                    } else {
                        app.error = 'Go to your affiliate site.';
                    }
                }
            );
        });
    },
},

Trying to assign a property to an undefined variable inside a function

Answer №1

Similar questions

Tips for inserting HTML into elements using Angular

Adaptable material for collapsible panels

"How to prevent users from using the back button on Google Chrome and Edge browsers

The function `jQuery .html('<img>')` is not functional in Firefox and Opera browsers

Trigger a unique event using Vanilla JS and then detect it on Vue instances

AngularJS wildcards can be used in filters for a versatile approach

Can we expect React's useState to wait before executing subsequent logic, or will it immediately update the state and trigger a re-render

Executing a function when a specific element is triggered within an ng-repeat in AngularJS

Vue-Routes is experiencing issues due to a template within one of the routes referencing the same ID

What are some strategies to enhance the efficiency of this code and reduce repetition?

A Smarter Approach to Updating Text Dynamically with JavaScript and Vue

The Next.js dynamic route in production is displaying a 403 error instead of the expected 404. What might be causing this issue?

Applying styled text to a Node.js chat application

Working with Vue.js: accessing nested data from child components within a v-for loop

After redirection to a new page, the Ionic-vue menu malfunctioned

Utilize Javascript to extract and showcase JSON data fetched from a RESTful API

Numerous instances of Codemirror

What is the difference in memory usage for JavaScript objects between Node.js and Chrome?

Ensure that any modifications made to an Angular service are reflected across all components that rely on that service

Disallow/bound the position of the marker on Google Maps