Vue data does not display value on console but does display on component

Question

I'm trying to retrieve a global session value and set it to the vue variable. The problem is, the id variable is not displaying any value on the console but does display the value on the vue component. I've checked with the vue devtools and the id does contain the correct value.

Vue Component

<template>
  <div class="container">
    <h1>{{id}}</h1> // the id does displays the value
  </div>
</template>

<script>
export default {
    data () {
        return {
          id:'',
        }
    },
    created(){
        axios.get('api/studentlecture').then(response => this.id = response.data).catch(function(error){console.log(error)
        });     
        console.log(this.id) 
    },
    methods:{

    },
    mounted() {
        console.log('Component mounted.')
    }
}

Controller

public function index()
{
    $id= session('userID');
    return json_encode($id);
}

Jerodev · Accepted Answer · 2019-03-25 07:51:12Z

4

Because the axios call is asynchronous. The JavaScript engine will execute the axios request, and while it is waiting it will continue executing the code.

You are trying to log this.id while it has not yet been assigned. If you want to log the value, you have to put it in the callback of your axios function.

axios.get('api/studentlecture')
    .then(response => {
        this.id = response.data;
        console.log(this.id); // <== Here
    })
    .catch(function(error){console.log(error)});

answered Mar 25, 2019 at 7:51

Jerodev

33.3k11 gold badges96 silver badges113 bronze badges

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

Comments

Zendy · Accepted Answer · 2019-03-25 07:59:33Z

2

This happens because console.log(this.id) is executed before axios.get() could resolve it's promise.

There are a few solution for this.

First one is to move console.log() inside then().

created() { 
  axios.get('api/studentlecture').then(response => {
    this.id = response.data;
    console.log(this.id);
  }).catch(error => {
    console.log(error)
  });
}

Or you can make use of async/await to wait the promise to resolve

async created() { 
  try {
    // This will wait until promise resolve
    const response = await axios.get('api/studentlecture');
    this.id = response.data;
    console.log(this.id);
  } catch(error) {
    console.log(error)
  }
}

You can learn more about promise here

And more about async/await difference with promise here

edited Mar 25, 2019 at 7:59

answered Mar 25, 2019 at 7:54

Zendy

7747 silver badges23 bronze badges

Comments

Hòa Nguyễn Coder · Accepted Answer · 2019-03-25 08:04:55Z

0

You can try using the following code below:

/*FRONT-END VUE*/

this.axios.get("https://localhost:8000/api/v1/data").then((response)=>{
                    this.data=response.data;
                    console.log(this.data);
                    if(this.data.success){
                      

                    }
 });

/*BACK-END LARAVEL*/
 
 function getData(){
    $result = array('success'=>true,'data'=>$data);
    
    return Response()->json($result);
 }

answered Mar 25, 2019 at 8:04

Hòa Nguyễn Coder

4433 silver badges8 bronze badges

Collectives™ on Stack Overflow

Vue data does not display value on console but does display on component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related