JqxCombo 值未从 ajax 结果设置 - Vue.js
Posted
技术标签:
【中文标题】JqxCombo 值未从 ajax 结果设置 - Vue.js【英文标题】:JqxCombo values not setting from ajax result - Vue.js 【发布时间】:2019-05-11 15:18:27 【问题描述】:我一直在尝试将 JqxWidgets 与 Vue.js 一起使用,这里的基本思想是我们可能在表单中有多个 ComboBox,并且只需调用 ComboBox 模板并提供 ajax 调用,它应该获取并设置为那个特定的组合框.
所以直到现在我都有这个
<template>
<JqxComboBox ref="core_combobox" : :
@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>
axios
的结果是因为某种原因被转换为 vue 实例这样,
0: __ob__: Observer
1: __ob__: Observer
length: 2
__ob__: Observer value: Array(2), dep: Dep, vmCount: 0
__proto__: Array
0里面的值是
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
如果有人对此很熟悉,请问我有两个问题。
1.为什么返回的不仅仅是js对象?
2.数据来了,怎么设置成JqxCombo
?
【问题讨论】:
【参考方案1】:第一个问题:
这是 Vue 添加的一个特殊属性,它是 Reactivity 系统的一部分,它允许 Vue 跟踪数据更改并对其做出反应,您可以在 official doc 中了解更多信息
第二个问题:
当数据使用axios
调用时,您可以将其分配给source
属性,例如:
getComboSource: function()
axios
.get('/admin/forms/' + this.comboDataSource + '/listDataSource')
.then(function(response)
console.log(response.data);
this.source= response.data;//<-------
);
在你的数据对象中你应该初始化source
,如下所示:
data: function()
return
regexPattern: /(?<=\()(.*)(?=)\)/g,
datafields: [
name: 'value'
,
name: 'label'
],
source://<----
【讨论】:
以上是关于JqxCombo 值未从 ajax 结果设置 - Vue.js的主要内容,如果未能解决你的问题,请参考以下文章
Ajax / PHP:调用正常,但未从 PHP 发出警报结果