Vue 2 About nextTick

Question

I have read that nextTick allows codes to be executed at the next action. But this does not work in my code, can someone helps me on this? Please correct me. Thanks.

.vue

.....
methods:{
      getUserInfo(){
        var vm = this
        vm.$http.get('/getAuthUser').then((response)=>{
          vm.user = response.data
        })
        Vue.nextTick(()=>{
          vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
            vm.shop = response.data.data.shop
          })
        })
      },
}
.....

{{user.id}} does work. where this gives me the following error:

GET http://localhost:8000/getShop/undefined 404 (Not Found)

EDIT#1 if i do something like this it works but this should not be the right way to do in my opinion.

.....
methods:{
      getUserInfo(){
        var vm = this
        vm.$http.get('/getAuthUser').then((response)=>{
          vm.user = response.data
          vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
            vm.shop = response.data.data.shop
          })
        })
      },
}
.....

EDIT#2 If I do something like this it wont work coz vm.user.id is not set.

.....
methods:{
      getUserInfo(){
        var vm = this
        vm.$http.get('/getAuthUser').then((response)=>{
          vm.user = response.data
        })
        vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
          vm.shop = response.data.data.shop
        })
      },
}
.....

Answer 1

I think your understanding of what nextTick does is incorrect. If you read the documentation, it says that the callback you pass to the nextTick function will be executed after the next DOM update.

Let's say you have a property that determines whether an element exists or not in the DOM with a v-if directive. If you change the value of the property so that the element exists in the DOM, you might have to wait for Vue to process the change and update the DOM before you can grab a reference of that element, for example. In that case, you should use Vue.nextTick to make sure by the time you want to query the DOM to get that element, it actually exists.

Your scenario doesn't have anything to do with the DOM.

You have 2 asynchronous HTTP calls that you want to execute one after another, because the second relies on the result of the first. Your original implementation and third one (EDIT#2) are flaky because you don't make sure the first HTTP request is complete before firing the second one, which explains why you get errors about vm.user.id not being set.

Your second implementation (EDIT#1) is more correct because the second HTTP request is fired after the first one completes. Still, I'd suggest a minor modification:

getUserInfo() {
    vm.$http.get('/getAuthUser')
        .then(response => {
            vm.user = response.data;

            return vm.$http.get('/getShop/' + vm.user.id);
        }).then(response => {
            vm.shop = response.data.data.shop;
        });
}

The first callback returns a Promise which result is fed into the second then call. I like this approach because it avois having nested thens. I would also suggest you to read the MDN docs on Promises.