[Vuejs]-How do I display data returned from Laravel resource in Vue Component?

by

0👍

To do what you are asking, you will have to use axios. You can install it by npm install axios

Next, check your resource/js/bootstrap.js file to make sure you have axios imported.

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

And, in your resource/js/app.js file add

require("./bootstrap");

Run npm run dev

Finally, add the script to your main .blade file <script src="{{ asset('js/app.js') }}"></script>

At the end, simply call via axios from a method

axios.get('route')
     .then(response => {
          console.log(response.data); // store this in a variable
      })
      .catch(error => {
          console.log(error.response.data);
      });

Your component call

<YourComponent v-for="list in lists" />

Keep me posted in the comments below. Cheers!

Leave a comment