VueJS v-for in index array first element

Question

Iam new in vuejs. So I have this array in my data and when I output the data in console the result is correct. I need to put the categories in an array because it can have multiple categories.

const app = new Vue({ 
   el:"#app",
   data:{
     market:{
        categories:[]
     }
   },
   methods: {
      init: function(){
         var app = this;
         var url = '/api/categories/0';
            axios.get(url).then(function(response){
               app.market.categories[0] = response.data;
               console.log(app.market.categories[0]);
        });
      }
   }
});

But when use v-for in the ui it doesn't show. Can you help? Thanks`

 <select class="form-control form-control-no-border" id="s-category1">
      <option value="">Please select a category</option>
      <option v-for="category in market.categories[0]" :value="category.external_code">@{{ category.name  }}</option>
  </select>

bbsimonbb · Accepted Answer · 2018-06-25 08:07:14Z

3

Vue cannot react to changes to array elements when you access them with square brackets. When you modify array elements, you need to access them with array methods, or use Vue.set, like this...

Vue.set( app.market.categories, 0, response.data );

edited Jun 25, 2018 at 8:07

answered Jun 25, 2018 at 7:41

bbsimonbb

29.3k18 gold badges92 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bbsimonbb Over a year ago

What do you see? What do you see in your categories array?

etcz0ne Over a year ago

in the ui nothings happen, but when I output the categories in console it shows an array in categories. I need to put the data in categories[0] since categories[1] can have different set of array

bbsimonbb Over a year ago

Ah ok, you have a 2d array for categories? Then your problem is updating the array. You need to use Vue.set(). Hold on I'll update the answer.

bbsimonbb Over a year ago

No problem. There are very few gotchas in Vue, but this is one of them. It's a limitation of javascript.

Collectives™ on Stack Overflow

VueJS v-for in index array first element

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related