Improving a Vue.js notification component with data retrieved from a fetch request result

Question

Improving a Vue.js notification component with data retrieved from a fetch request result

Struggling with updating the content inside a vuetify v-alert.

There's an issue when trying to update Vue component properties within the sessionID.then() block after logging into a system and receiving a session id.

Vue.component('query-status', {
  template: `
    <div>
      <v-alert :type="type">
        {{ alertText }}
      </v-alert>
    </div>`,
  data() {
    return {
      alertText: '',
      type: 'success'
    }
  },
  methods: {
    checkQueryStatus: function() {
      var sessionID = login();
      sessionID.then(function(result) {
        this.alertText = result;
      });
    }
  }
});

The question remains, why doesn't the sessionID.then block have access to the alertText property?

javascript vue.js vuejs2 vue-component vuetify.js

Answer 1

Answer №1

If you fail to bind the this pointer, the inner function will not be able to access it.

To resolve this issue, you have a few options:

checkQueryStatus : function() {              
  var sessionID = login();
  var that = this;
  sessionID.then(function(result) {
    that.alertText = result;
  });
}

You can also consider using an ES6 arrow function:

checkQueryStatus : function() {              
  var sessionID = login();  
  sessionID.then(result => {
    this.alertText = result;
  });
}

Alternatively, you can bind the this pointer using Function.prototype.bind:

checkQueryStatus : function() {              
  var sessionID = login();  
  sessionID.then(function(result) {
    this.alertText = result;
  }.bind(this));
}

Another approach would be to utilize async / await:

methods: {
  async checkQueryStatus() {              
    this.alertText = await login();
  }
}

Answer 2

If you fail to bind the this pointer, the inner function will not be able to access it.

To resolve this issue, you have a few options:

checkQueryStatus : function() {              
  var sessionID = login();
  var that = this;
  sessionID.then(function(result) {
    that.alertText = result;
  });
}

You can also consider using an ES6 arrow function:

checkQueryStatus : function() {              
  var sessionID = login();  
  sessionID.then(result => {
    this.alertText = result;
  });
}

Alternatively, you can bind the this pointer using Function.prototype.bind:

checkQueryStatus : function() {              
  var sessionID = login();  
  sessionID.then(function(result) {
    this.alertText = result;
  }.bind(this));
}

Another approach would be to utilize async / await:

methods: {
  async checkQueryStatus() {              
    this.alertText = await login();
  }
}

Improving a Vue.js notification component with data retrieved from a fetch request result

Answer №1

Similar questions

What is the correct way to dynamically switch between RTL and LTR in React with Material UI?

Using javascript to extract values from nested JSON structures without prior key knowledge

I am having trouble getting ng-change to work. Can someone explain how to properly implement ng

Save the raw InputMask data in Formik with Material-UI

Ramda represents a distinct alternative to traditional vanilla JavaScript

What is the best way to set up webpack to exclude a non-existent asset in my scss files?

How can I trigger a PHP function by clicking a button on a PHP page that has already been loaded?

Apply a see-through overlay onto the YouTube player and prevent the use of the right-click function

Invalid file name detected during the download process

Issues with Angular preventing app from launching successfully

Hide elements forever once the form is submitted

Unable to access $_SESSION variable when making AJAX request from a different port

Converting function arguments into key/value pairs: A simple guide

What is the process for retrieving matched information from a drop-down menu in HTML?

Awaiting fulfillment - Promise remains pending as loop executes queries

What is the process of creating a download link for a server file in a web browser?

What steps can be taken to remove the search parameter responsible for the error?

Having trouble with my JQuery image slider... Can anyone help troubleshoot what I might have missed?

Generating an order prior to payment being made by the customer

Wordpress team exhibition