Hi I’m trying to change my vue wrapper component dropdown with axios. This is my code.
JavaScript
x
95
95
1
<html>2
<head>3
<title>title</title>4
<meta charset="UTF-8">5
<meta name="viewport" content="width=device-width, initial-scale=1.0">6
</style>7
</head>8
<body>9
<div id="el"></div>10
<script type="text/x-template" id="demo-template">11
<div>12
<p>Selected: {{ input.selected }}</p>13
<select2 :options="options" v-model="input.selected">14
<option disabled value="0">Select one</option>15
</select2>16
</div>17
</script>18
19
<script type="text/x-template" id="select2-template">20
<select>21
<slot></slot>22
</select>23
</script>24
<script src="http://themestarz.net/html/craigs/assets/js/jquery-3.3.1.min.js"></script>25
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>26
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>27
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>28
<script>29
Vue.component('select2', {30
props: ['options', 'value'],31
template: '#select2-template',32
mounted: function () {33
var vm = this;34
$(this.$el)35
// init select236
.select2({data: this.options})37
.val(this.value)38
.trigger('change')39
// emit event on change.40
.on('change', function () {41
vm.$emit('input', this.value)42
})43
},44
watch: {45
value: function (value) {46
// update value47
$(this.$el)48
.val(value)49
.trigger('change')50
},51
options: function (options) {52
// update options53
$(this.$el).empty().select2({data: options})54
}55
},56
destroyed: function () {57
$(this.$el).off().select2('destroy')58
}59
});60
61
var vm = new Vue({62
el: '#el',63
template: '#demo-template',64
data: {65
input: {66
selected: "all"67
},68
options: [] 69
},70
created: function () {71
this.mymethod();72
},73
methods: {74
mymethod: function () {75
var vm = this;76
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')77
.then(function (response) {78
vm.options = [79
{id: 'all', text: 'All'},80
{id: 1, text: 'Hello'},81
{id: 2, text: 'World'},82
{id: 3, text: 'Bye'}83
];84
vm.input.selected = 2;85
})86
.catch(function (error) {87
console.log(error);88
});89
}90
}91
});92
</script>93
</body>94
</html>95
The problem I have is when I try to add selected item it’s not working inside axios. And it’s working properly outside axios.
JavaScript
1
2
1
vm.input.selected = 2;2
I got selected the all initially as the image shows. Think ajax call does not matter so I reduced the code complexity a bit. Thanks.
Advertisement
Answer
seems like I had issues with with wrapper component. After I changed the order of options and value in the component’s watch this was fixed. I’m adding this in case anyone in the future faced the same issue.
JavaScript
1
15
15
1
watch: {2
options: function(options) {3
// update options4
$(this.$el).empty().select2({5
data: options6
})7
},8
value: function(value) {9
// update value10
$(this.$el)11
.val(value)12
.trigger('change')13
}14
},15