1

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"

msh
  • 21
  • 5
  • 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](https://www.educative.io/edpresso/how-to-make-an-axios-get-request) is a simple get request using axios. – Salvino D'sa Aug 07 '21 at 13:36

1 Answers1

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

kissu
  • 40,416
  • 14
  • 65
  • 133
  • 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) [] ------------- ** – msh Aug 07 '21 at 20:41
  • @msh you probably missed something. Did you use the given repo? Is axios installed? Do you see it in your browser devtools, network tab? – kissu Aug 07 '21 at 21:50
  • 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. https://stackoverflow.com/questions/68691933/how-to-get-user-info-after-logging-in-with-vue-js-in-vuexy-admin-dashboard-temp – msh Aug 08 '21 at 19:49