In this scenario, it is necessary to execute the carResult function only after all axios requests have been completed. Placing it inside the success method of method2 won't work because the component ends up executing the code twice. It would be greatly appreciated if someone could provide a Vue code snippet that executes after all axios requests are finished.
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</style>
</head>
<body>
<div id="el">
<div>
<p>Selected: {{ input.selected }}</p>
<select2 :options="options" v-model="input.selected">
<option disabled value="0">Select one</option>
</select2>
</div>
<div>
<p>Selected: {{ input.selected2 }}</p>
<select2 :options="options2" v-model="input.selected2">
<option disabled value="0">Select one</option>
</select2>
</div>
</div>
<script type="text/x-template" id="select2-template">
<select>
<slot></slot>
</select>
</script>
<script src="http://themestarz.net/html/craigs/assets/js/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7701021237455942594640">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
Vue.component('select2', {
props: ['options', 'value'],
template: '#select2-template',
mounted: function () {
var vm = this;
$(this.$el)
// init select2
.select2({data: this.options})
.val(this.value)
.trigger('change')
// emit event on change.
.on('change', function () {
vm.$emit('input', this.value)
})
},
watch: {
options: function (options) {
// update options
$(this.$el).empty().select2({data: options})
},
value: function (value) {
// update value
$(this.$el)
.val(value)
.trigger('change')
}
},
destroyed: function () {
$(this.$el).off().select2('destroy')
}
});
var vm = new Vue({
el: '#el',
data: {
input: {
selected2: "all",
selected: "all"
},
options: [],
options2: [],
items: []
},
created: function () {
this.mymethod();
},
watch: {
input: {
handler(newInput) {
this.carResult();
},
deep: true
},
itemsArray() {
this.setPages();
}
},
methods: {
mymethod: function () {
var vm = this;
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(function (response) {
vm.options = [
{id: 0, text: 'All'},
{id: 1, text: 'Hello'},
{id: 2, text: 'World'},
{id: 3, text: 'Bye'}
];
vm.input.selected = 2;
vm.method2();
})
.catch(function (error) {
console.log(error);
});
},
method2: function () {
var vm = this;
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(function (response) {
vm.options2 = [
{id: 0, text: 'All'},
{id: 1, text: 'This'},
{id: 2, text: 'is'},
{id: 3, text: 'second'}
];
vm.input.selected2 = 2;
})
.catch(function (error) {
console.log(error);
});
},
carResult: function () {
var vm = this;
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(function (response) {
vm.items = response.data;
})
.catch(function (error) {
console.log(error);
});
}
}
});
</script>
</body>
</html>