VueJS v-for в индексном массиве первого элемента

Question

Я новый в vuejs. Таким образом, у меня есть этот массив в моих данных, и когда я вывожу данные в консоль, результат правильный. Мне нужно поместить категории в массив, потому что он может иметь несколько категорий.

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]);
        });
      }
   }
});

Но при использовании v-for в пользовательском интерфейсе он не отображается. Вы можете помочь? 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>

Answer 1

Vue не может реагировать на изменения элементов массива при обращении к ним в квадратных скобках. Когда вы изменяете элементы массива, вам нужно обращаться к ним с помощью методов массива или использовать Vue.set, например так ...

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