Axios response data is not loading on Vue component in Laravel

Question

guys hope y'all doing well! I got a little problem with passing data from axios response to data property. The data fetched from database shows on the console after being fetched but when i want to display it on th component it shows an empty array. Thanks in advance

Vue Component Script:

<script>
    import axios from 'axios';
    export default {
         data(){
                return {
                        Templates:[],
                        loading:true
                    }
        },
        async mounted() {
            await axios.post('/getTemplates')
                .then(response =>this.Templates =response.data )
                .catch(error => console.log(error.message))
                console.log(this.Templates)
        }

    }

</script>

I called the the data prop with {{Templates}} on component :

<article class="overflow-hidden rounded-lg shadow-lg max-w-lg">
  <a href="#">
  </a>
      {{Templates}}
  <header class="flex items-center justify-between leading-tight p-2 md:p-4">
      <h1 class="text-lg">
          <a class="no-underline text-black" href="#">
          </a>
      </h1>
      <p class="text-grey-darker text-sm">
          Text
      </p>
  </header>
  <footer class="relative flex items-center justify-between leading-none p-2 md:p-4">
      <a class="flex items-center no-underline hover:underline text-black" href="#">
          <svg width="24" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C17.5915 3 22.2898 6.82432 23.6219 12C22.2898 17.1757 17.5915 21 12 21C6.40848 21 1.71018 17.1757 0.378052 12C1.71018 6.82432 6.40848 3 12 3ZM12 19C7.52443 19 3.73132 16.0581 2.45723 12C3.73132 7.94186 7.52443 5 12 5C16.4756 5 20.2687 7.94186 21.5428 12C20.2687 16.0581 16.4756 19 12 19Z" fill="currentColor" /></svg>
      </a>
      <a class="flex no-underline hover: no-underline text-red-dark bg-blue hover:bg-blue-light text-white font-bold text-lg border-b-4 border-blue-dark hover:border-blue absolute bg-blue-500 rounded-lg px-1 py-1 transition duration-300 ease-in-out hover:bg-blue-600 right-3" href="#">
          <span>Select</span>
      </a>
  </footer>
</article>

Blade template :

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">

            <!-- Column -->
            <div class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3">
                <!-- Template -->
                <div id="app">
                    <buzzevent-template></buzzevent-template>
                </div>
                <!-- End Template -->
            </div>
            <!--End Column -->
            </div>
        </div>
    </div>
    <script src="{{asset('js/app.js')}}"></script>

</x-app-layout>

If you need any more details please ask.

Output :

Result Image

@Andrew Trying to see if it loads first ! then i can use specific attributes — Baamel youssef
Not sure, but my guess is that your handling of the axios response is not right. await + .then() is double handling of a single promise. Remove the await I'd say. — Reynicke
@Baamelyoussef change {{Templates}} to {{Templates.length}} and see what you get — Andrew

Andrew Andrew · Accepted Answer · 2021-03-10T15:33:02

Looks like the ES6 syntax is a little off, add {} braces into your .then() like:

<script>
    import axios from 'axios';
    export default {
         data(){
                return {
                        Templates:[],
                        loading:true
                    }
        },
        async mounted() {
            await axios.post('/getTemplates')
                .then(response => { this.Templates = response.data })
                .catch(error => { console.log(error.message) })
                console.log(this.Templates)
        }

    }

</script>

Syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

Take a look at the following SO question: Issue displaying updated data in Vue component after axios POST

Axios response data is not loading on Vue component in Laravel

2 Answers