Значения JqxCombo не устанавливаются из результата ajax - Vue.js - PullRequest
Новая
       6

Значения JqxCombo не устанавливаются из результата ajax - Vue.js

0 голосов
/ 10 декабря 2018

Я пытался использовать JqxWidgets с Vue.js, основная идея здесь в том, что у нас может быть несколько ComboBox в форме, и просто вызывая шаблон ComboBox и предоставляя вызов ajax, он должен получить и установить этот конкретный комбинированный список,

Итак, до сих пор у меня есть 

<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>

Результат 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 Ответ

0 голосов
/ 10 декабря 2018

1-й вопрос :

Это специальное свойство, добавленное Vue, оно является частью системы реактивности, которая позволяет Vue отслеживать изменения данных и реагировать на них, вы можете прочитать об этом больше.в официальном документе

2-й вопрос :

Когда данные поступают с использованием вызова 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:{}//<----
  }
}
...