[Vuejs]-Returned data from post request not passed to vue template

by

2👍

✅

I think this is not your component instance inside .done() callback since you are using simple function. Maybe use arrow function.

Try changing:

get_teams() {
        this.reset_show('get_teams')
        $.post(js_local.ajaxurl,{
            action:'get_advisor_teams'
        }).done((data) => {            // use arrow function
            this.teams = data
            this.show_teams = true
            console.log(this.teams)
        }).fail(function(data){
            console.log('fail @ { action : get_advisory_teams }')
        })

      }

// also make sure get_teams() method is invoking from somewhere else
created() {
  this.get_teams();
}
👤Sajib Khan

1👍

Using a callback like you’re doing will cause some errors, so i recommend to use arrow functions ()=>{...} instead of function(){...} as callback since you’re loosing the context of this :

get_teams : function(){
    this.reset_show('get_teams')
    $.post(js_local.ajaxurl,{
        action:'get_advisor_teams'
    }).done((data) => {
        this.teams = data
        this.show_teams = true
        console.log(this.teams)
    }).fail(function(data){
        console.log('fail @ { action : get_advisory_teams }')
    })

  }

or by assigning this to a global variable called that and use it inside the callback context :

      get_teams : function(){
        this.reset_show('get_teams')
        let that=this; 
        $.post(js_local.ajaxurl,{
            action:'get_advisor_teams'
        }).done(function(data){
            that.teams = data
            that.show_teams = true
            console.log(that.teams)
        }).fail(function(data){
            console.log('fail @ { action : get_advisory_teams }')
        })

      }
👤Boussadjra Brahim

Leave a comment