I've been experimenting with integrating JqxWidgets into Vue.js. The concept is to have multiple ComboBox elements in a form and simply call the ComboBox template while providing an ajax call to get and set data for that specific combobox.
So far, this is what I have:
<template>
<JqxComboBox ref="core_combobox" :width="`100%`" :height="25"
@change="onChange($event)" :source="source" :selectedIndex="0" :displayMember="'label'" :valueMember="'value'">
</JqxComboBox>
</template>
<script>
import JqxComboBox from "./jqx-vue/vue_jqxcombobox.vue";
export default {
components: {
JqxComboBox
},
props : {
comboDataSource : String
},
methods: {
onChange: function (event) {
if (event.args) {
let item = event.args.item;
if (item) {
alert(item.value)
}
}
},
getComboSource : function (){
axios
.get('/admin/forms/'+this.comboDataSource+'/listDataSource')
.then(function(response){
console.log(response.data);
return response.data;
});
},
data: function () {
return {
regexPattern : /(?<=\()(.*)(?=)\)/g,
datafields: [
{ name: 'value' },
{ name: 'label' }
],
source: this.getComboSource()
}
}
}
</script>
The axios response seems to be converted to vue instances:
0: {__ob__: Observer}
1: {__ob__: Observer}
length: 2
__ob__: Observer {value: Array(2), dep: Dep, vmCount: 0}
__proto__: Array
The value inside index 0 includes:
label: "SS Sales Corportation"
value: 1
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get label: ƒ reactiveGetter()
set label: ƒ reactiveSetter(newVal)
get value: ƒ reactiveGetter()
set value: ƒ reactiveSetter(newVal)
__proto__: Object
If anyone has experience with this issue, I have two questions:
1. Why isn't the return just a plain JavaScript object?
2. When the data is received, how can I properly set it to the JqxCombo?