[Vuejs]-When i get data with Axios my JS code doesn't works

by

0👍

You should always put an unique key if you use a v-for loop

  <li v-for="(category,index) in categories" :key="index">

I used here index as unique key but you should use something else thats unique, maybe the category name

0👍

Vue’s reactivity system works pretty good in overall. However, there’s always some pitfalls in every language and framework. Same goes for Vue, obviously. In your specific case Vue just can’t update the array properly which is why your view doesn’t re-render. You can read more about it here. But there’s always hope. Let’s talk a bit about [Vue.$set][1]. In cases where the automatic reactivity system just fails to work or just doesn’t work as expected, you can always use Vue.$set manually. In fact, Vue just uses this function internally for all of your variables which are initially set in your data.

So in your case this should actually solve your issue.

new Vue({
    el:"#app",
    data:{
        categories:[],
    },
    mounted(){
     axios
     .get('getCategories.php')
     .then(response => {
         response.data.forEach((d, i) => {
             this.$set(this.categories, i, d);
         }
    })
 }});

Leave a comment