Vue.js prepopulating data

Question

I have a form with several comboboxes, and comboboxes are poupulated from REST services, but my problem is that the working model is loaded before any of the data which are needed for comboboxes, so combobox is never set to a proper value.

I can make it work only if i set load model inside load dropdown callback, but this look messy, and not working if more than one dropdown.

How to solve this problem in vue?

Here's the script

var app = new Vue({
    el: '#categoryEdit',
    data: {
        category: {},
        categories: []
    },
    methods: {
        getCategory: function(categoryId) {
            const config = {
                headers: {
                    'Authorization': 'Bearer ' + '@token'
                }
            };
            axios.get('/api/categories/' + categoryId, config)
                .then(function(response) {
                    app.category = response.data;
                    console.log(app.category);

                })
                .catch(function(error) {
                    alert(error);
                    console.log(error);
                });
        },
        add: function() {
            const config = {
                headers: {
                    'Authorization': 'Bearer ' + '@token'
                }
            };
            axios.post('/api/categories/save', app.author, config);
        },
        fetchCategories: function() {
            var config = {
                headers: {
                    'Authorization': 'Bearer ' + '@token'
                }
            }

            axios.get('/api/categories/all', config)
                .then(function(response) {

                    app.categories = response.data;

                })
                .catch(function(error) {
                    alert(error)
                    console.log(error);
                });
        }
    },
    mounted: function() {
        this.fetchCategories();
        this.getCategory('@ViewContext.RouteData.Values["id"]');
    }
})

And here's the HTML

<div class="form-group">
    <label class="col-md-3 control-label">Kategorija</label>
    <div class="col-md-9">
        <select class="form-control select2 select2-hidden-accessible" v-model="category.ParentCategoryId">
            <option v-for="cat in categories" :value="cat.Id">
                {{cat.Name}}
            </option>
        </select>
    </div>
</div>

Answer 1

Try to load category after all categories are loaded:

mounted: function() {
  this.fetchCategories()
    .then(() => {
      this.getCategory('@ViewContext.RouteData.Values["id"]')
    })
}

For this make sure fetchCategories returns promise:

fetchCategories: function() {
  var config = {
    headers: {
      'Authorization': 'Bearer ' + '@token'
    }
  }

  return axios.get('/api/categories/all', config)
    .then(response => {
      this.categories = response.data;
    })
    .catch(error => {
      alert(error)
      console.log(error);
    });
}

Also, it's better to bind all data to this object, you don't want your app code to know how you named Vue instance variable.