[Vuejs]-LocalStorage onClick button display undefined values?

The values from your api calls are only available inside the .then function. So what’s happening is, you’re setting the keys/values on localStorage directly, before the promise returned from axios.get has resolved.

The reason you are only seeing the values reflected in localStorage after the second click has to do with promises and the order of execution. The first time you click the button, you’re sending two GET requests, and then immediately updating localStorage with this.userid / this.UserName, both of which are still empty strings. After that function finished executing, the promise from axios.get resolves, and the values of this.userid / this.UserName are updated by the .then function. The second time you click the button, the localStorage values are updated with the values of this.userid / this.UserName which were previously set.

Also, bear in mind, you should use localStorage.setItem('key', 'value') instead of localStorage.key = 'value'.

The bottom line is, you should move the code that stores key/value pairs in localStorage inside of the .then.

You are not waiting for the ajax (xhr) to complete before saving the values in local storage. .then is the function called after the xhr is complete, so your code to save the values in local storage should be inside .then

axios.get(`http://localhost:4000/api/users/2`)
            .then(function(Response) {
                    this.userid = Response.data.data.id
                    localStorage.setItem('userid', this.userid);
                    this.UserName = Response.data.data.fname
                    localStorage.setItem('UserName', this.UserName);
            });
  

Because both your API calls are to the same endpoint, I have also combined them into one.

Now about your button click:

If you need to show data on click then you should only allow click after the data is received from the API call. To do this you can disable the button until .then is complete. And then re-enable it.

       //**button is disabled when page loaded** 
       axios.get(`http://localhost:4000/api/users/2`)
            .then(function(Response) {
                    this.userid = Response.data.data.id
                    localStorage.setItem('userid', this.userid);
                    this.UserName = Response.data.data.fname
                    localStorage.setItem('UserName', this.UserName);
                    //**enable button here**
            });

Now the fact that you are making the call to your API even when data is stored in localstorage:

I am assuming that you are storing the data in localstorage so that you don’t have to make another call to fetch it again.
But currently, your code always makes the API call even when the data is aready presnt in local storage.
You can fix it like this:

//**button is disabled when page loaded** 
methods:{
    signIn(){

      var uId = localStorage.getItem('userid');
      var uName = localStorage.getItem('UserName');
      if(uId && uName) {
         //**enable button here**
      }
    }
    getData() {
        axios.get(`http://localhost:4000/api/users/2`)
            .then(function(Response) {
                    this.userid = Response.data.data.id
                    localStorage.setItem('userid', this.userid);
                    this.UserName = Response.data.data.fname
                    localStorage.setItem('UserName', this.UserName);
                    //**enable button here**
            });
      }
  }

Call getData when your page loads up and then enable the button. So, when the button is clicked the data, is available!

1.) Try onclick instead of @click.
2.) Log to the Console the data you received from localhost:4000