VueJS get value from an axios promise

Question

I have this code

Template :

<a href="#" class="video" @click.prevent="checkVideo(subItem.id)" :id="subItem.id" data-toggle="modal" data-target="#playerModal">{{subItem.name}}<span>{{getDuration(subItem.id)}}</span></a>

VueJS Function :

async getDuration(id) {
    var duration  = '';
    await axios.post('/api/v1/checkvideo', {
    menu: id
    })
    .then(function (response) {
    console.log(response.data[0].datas.duration)
    return response.data[0].datas.duration;
    });

    //console.log(duration);
    //return duration;
},

The problem is that the console.log show the values as expected but on the Vue Rendering I get this [object Promise] I want to know how to show the values after the promise has been resolved.

Thanks for helping

bcjohn · Accepted Answer · 2019-05-06 10:09:02Z

6

Your code is return axios which is a promise object. If you want to return final duration. You should await axios promise and return the response.

async getDuration(id) {
  var duration  = '';
  const response = await axios.post('/api/v1/checkvideo', {
    menu: id
  })
  return response.data[0].datas.duration;
}

EDITED

Since async return a promise, [object Promise] will always be rendered on the screen. If you want to get duration on a specific id, I think this is correct to do.

data() {
  return {
    id: null, // Maybe you should store the value of `id` here
    duration: null
  }
},
mounted() {
  this.getDuration(this.id)
},
methods: {
  async getDuration(id) {
    var duration  = '';
    const response = await axios.post('/api/v1/checkvideo', {
      menu: id
    })
    this.duration = response.data[0].datas.duration;
  }
}

edited May 6, 2019 at 10:09

answered May 6, 2019 at 9:33

bcjohn

2,54315 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rahmani Seif el moulouk Over a year ago

I get the same result

Collectives™ on Stack Overflow

VueJS get value from an axios promise

Template :

VueJS Function :

1 Answer 1

EDITED

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Template :

VueJS Function :

1 Answer 1

EDITED

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related