CODEWITHSUNDEEP
vue.jsvuejs2
ToddT
ToddT

Reputation: 3258

Which Lifecycle hook after axios get but before DOM render

I'm trying to render my DOM, dependent on some data I'm returning from an axios get. I can't seem to get the timing right. The get is in the created hook, but there is a delay between the get and actually receiving the data. Basically if there is info in seller_id then I need to show the cancel button, otherwise don't. Here is my code:

this is in my created hook

axios.get('https://bc-ship.c9users.io/return_credentials').then(response => {
      this.seller_id = response.data.seller_id;
      this.selected_marketplace = response.data.marketplace;      
      this.token = response.data.auth_token;
});

and then this is the logic to show or hide the button. I've tried created, mounted, beforeUpdate, and updated all with no luck. I've also tried $nextTick but I can't get the timing correct. This is what I have currently:

beforeUpdate: function () {
// this.$nextTick(function () {
  function sellerIdNotBlank() {
    var valid = this.seller_id == '';
    return !valid;
  }
  if(sellerIdNotBlank()){
    this.show_cancel_button = true;
  }
// })
},

Upvotes: 0

Views: 1340

Answers (1)

Harshal Patil
Harshal Patil

Reputation: 20940

First, it is pointless to get your data from backend and try to sync with Vue.js lifecycle methods. It never works.

Also, you should avoid beforeUpdate lifecycle event. It is often a code smell. beforeUpdate is to be used only when you have some DOM manipulations done manually and you need to adjust them again before Vue.js attempt to re-render.

Further, show_cancel_button is a very good candidate for a computed property. Here is how component will look:

const componentOpts = {

    data() {
        return {
            seller_id: '',
            // ... some more fields
        };
    },

    created() {
        axios.get('https://bc-ship.c9users.io/return_credentials').then(response => {
            this.seller_id = response.data.seller_id;
            this.selected_marketplace = response.data.marketplace;      
            this.token = response.data.auth_token;
        });
    },

    computed: {

        show_cancel_button() {
            return this.seller_id !== '';
        }

    }
}

Upvotes: 2

Related Questions