Hey everyone, I hope you're all doing well! I'm facing a bit of an issue with passing data from an axios response to the data property. The data is successfully fetched from the database and displayed in the console, but when I try to display it on the component, it shows up as an empty array. Any help would be greatly appreciated. Thanks in advance!
Here's the 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 tried calling the data prop with {{Templates}} in the 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 used:
<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 more information is needed, feel free to ask.
Check out the output here: