I am facing an issue with loading data from REST services to populate comboboxes in a form. The problem is that the working model gets loaded before the required data for the comboboxes, resulting in them not being set to the correct value.
The only way I can make it work is by setting the load model inside the load dropdown callback. However, this approach seems messy and does not work when there are more than one dropdown on the form.
Can anyone suggest a solution for this problem using Vue?
Below is 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>