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 发出警报结果

commandButton / commandLink / ajax动作/侦听器方法未调用或输入值未设置/更新

参数未从 Ajax 调用填充(尝试了一切)

Ajax 调用未从 ActiveRecord 返回最新数据

带有ajax的django:函数未从源文件加载

控制器 ActionResult 方法参数未从 ajax 调用接收表单数据