how to Get user information from vuejs with axios?

Question

Please advise what exactly I should write instead of this phrase? To display receive user information from the database? after logging in

//ProfileDropDown.vue
<template>
  <div class="text-right leading-tight hidden sm:block">
    <p class="font-semibold">{{ activeUserInfo.displayName }}</p>
    <small>Available</small>
  </div>
</template>

<script>

export default {
  data () {
    return {
       activeUserInfo: null
    }
  },
  methods: {
    async getUserInfo () {
      try {
           const res = await (write get request with axios to api)
           this.activeUserInfo = (object from res)
      } catch (e) {}
    }
  },
  async created() {
     await this.getUserInfo();
  }
}
</script>
If you want get data with store, you can use axios in state.js

...
const getUserInfo = () => {
  const userInfo = {}

  try {
      const res = await (write get request with axios to api)
      userInfo = (object from res)
  } catch (e) {}

  return userInfo
}
...

What exactly should I write instead of this phrase? "write get request with axios to api" "object from res"

Hey @msh this is a very vague question, but still I might be able to give you a direction. You need to write a method in laravel controller, that can be accessed & used for fetching data via vuejs. In Vue you will have to write a simple get request using axios, to fetch the data from that controller method(API) and display it to the user. Here is a simple get request using axios. — Salvino D'sa
– Salvino D'sa, Commented Aug 7, 2021 at 13:36

kissu · Accepted Answer · 2021-08-07 14:22:13Z

1

This is how to use the API named jsonplaceholder to fetch 10 users in a /pages/index.vue

<template>
  <div>
    Here is how the received payload is looking (Array of Objects)
    <pre>{{ users }}</pre>
    <div>
      -------------
      <p v-for="user in users" :key="user.id">
        name: <span>{{ user.name }}</span> and email: {{ user.email }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
    }
  },
  async fetch() {
    // $get is a shortcut for `.data` as shown here: https://axios.nuxtjs.org/usage#-shortcuts
    const usersResult = await this.$axios.$get('https://jsonplaceholder.typicode.com/users')
    console.log('what we have received', usersResult)
    this.users = usersResult
  },
}
</script>

You can found an example repo on this github link: https://github.com/kissu/so-nuxt-how-to-use-axios

Also, prefer using fetch() hook, or asyncData() since you're in a Nuxt context and not only Vue. More info can be found here: Difference between Asyncdata vs Fetch

edited Aug 7, 2021 at 14:22

answered Aug 7, 2021 at 14:09

kissu

47.3k16 gold badges94 silver badges197 bronze badges

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

3 Comments

msh Over a year ago

Hi @kissu I copied this guide to you in the program, but it does not return any data. Doesn't show any error in the console ?! Displays only this text. **Here is how the received payload is looking (Array of Objects) [] ------------- **

kissu Over a year ago

@msh you probably missed something. Did you use the given repo? Is axios installed? Do you see it in your browser devtools, network tab?

msh Over a year ago

Yes, dear friend @kissu I login by set axios api. But then I have trouble getting user information. I asked a more detailed question here, please see. stackoverflow.com/questions/68691933/…

Collectives™ on Stack Overflow

how to Get user information from vuejs with axios?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related