Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I have made an axios request into a vue component from laravel project. Before axios finish request component is loading. and axios response data is not fetching on component.
<template>
<div>
<p>
{{articles}}
</p>
</div>
</template>
<script>
export default {
name: "articles",
components:{
},
data(){
return {
articles:[],
}
},
methods:{
fetchData() {
axios.get('https://jsonplaceholder.typicode.com/todos')
.then(response => (this.articles = response.data));
},
},
mounted(){
this.fetchData();
},
}
</script>
@mizan_cs there are some points with array reactivity. try to update your code to swomething like:
methods:{
fetchData() {
axios.get('https://jsonplaceholder.typicode.com/todos')
.then(response => {
Vue.set(this, 'articles', response.data)
);
},
},
Hi @mizan_cs
That is the exact code of your component? Because I copied exactly as it is and it's working fine for me
Yes, Exact code. Can you please share code of your blade.php file
I moved js/app.js file from the bottom to head and it worked.
But the same code with previous version of Vuejs worked.
Currently i am using vue "vue": "^2.5.17"
@mizan_cs thank's God man for help to find the solution. I spent two days to explore what's wrong.
@silencebringer Overwriting the entire variable content is not causing reactivity issues. What causes reactivity issues is updating the content of a key of the reactive array.
For example, this would not work without Vue.set or this.$set
this.articles[0] = 'new content';
Please or to participate in this conversation.