I have been trying to use JqxWidgets with Vue.js, the basic idea here is that we may have multiple ComboBox in the form and just calling the ComboBox template and providing the ajax call, it should get and set to that particular combobox.
So until now I have this
<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: {
// Add here all used callbacks and/or events
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>
Result of the axios
is this for some reason is converted to vue instances like so,
0: {__ob__: Observer}
1: {__ob__: Observer}
length: 2
__ob__: Observer {value: Array(2), dep: Dep, vmCount: 0}
__proto__: Array
The value inside 0 is
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 is familiar with this, please I have two question.
1. Why is the return is not just js object?
2. When the data comes, how can I set it to the JqxCombo
?
1st question :
That’s a special property added by Vue, it’s part of the Reactivity system which allows Vue to track data changes and react to them, you could read more about it in the official doc
2nd question :
When the data comes using axios
call you could assign it to source
property like :
getComboSource: function() {
axios
.get('/admin/forms/' + this.comboDataSource + '/listDataSource')
.then(function(response) {
console.log(response.data);
this.source= response.data;//<-------
});
}
and in your data Object you should initialize source
as follows:
data: function() {
return {
regexPattern: /(?<=\()(.*)(?=)\)/g,
datafields: [{
name: 'value'
},
{
name: 'label'
}
],
source:{}//<----
}
}