Атрибут ползунка диапазона обновления Vue-form-generator - PullRequest
Новая
       13

Атрибут ползунка диапазона обновления Vue-form-generator

0 голосов
/ 28 сентября 2018

В настоящее время я настраиваю многошаговую форму, в которой ввод от одного ползунка должен влиять на максимум другого.Я могу вручную обновить max, используя this.tabSchema. (Tab-id) .fields [0] .rangeSliderOptions.max, но это совсем не меняет UX.Я вижу в консоли, что max был правильно обновлен, но UX показывает старый max.

Копаясь в документации на ion.RangeSlider, я вижу, что у него есть методы .update, .destroy и .reset,Однако, похоже, что для этого требуется особая для jquery функция .data (), чтобы правильно настроить объект-слайдер, который затем вызывается .update ().Я не вижу никакой документации вокруг этого для использования в Vue.Есть ли известный способ сделать это?Если нет, кто-нибудь знает способ обойти это?

ETA: с запрошенным кодом.Здесь уместно немного tabSchema.В tabSchema есть еще много вкладок, но есть две соответствующие: 

               tabSchema: {
                  "num1" : {
                    fields: [{
                        type: "rangeSlider",                        
                        rangeSliderOptions: {
                            type: "single",
                            grid: false,
                            min: 0,
                            max: 2000000,
                            step: 5000,
                            // from: 100000,
                            prettify_enabled: true,
                            prettify_separator: ",",
                            prefix: "$",
                            hide_min_max: false,
                        },
                        id: "num1In",
                        model: "num1Val",
                        required:true,
                        styleClasses:'col-xs-12 col-sm-10 slider-bar'
                    }]
                },
              "num2" : {
                fields: [{
                    type: "rangeSlider",                        
                    rangeSliderOptions: {
                        type: "single",
                        grid: false,
                        min: 0,
                                // max: ,
                        step: 5,
                        // from: 0,
                        prettify_enabled: true,
                        prefix: "$",
                        hide_min_max: false,
                    },
                    id: "num2In",
                    model: "num2Val",
                    required:true,
                    styleClasses:'col-xs-12 col-sm-10 slider-bar'
                }]
            }
          }

А вот фрагмент кода, который проверяет каждую вкладку: 

    validateTab: function(num){
        var $valid = false; // assume not valid until checks are passed
        this.error = '';
        //////////// other validation //////////
        else if (num == "num1"){
            $valid = (this.model.num1Val != "");
            if(!$valid){
                this.error = 'Please provide a valid purchase price';
            } else {
                this.tabSchema.num2.fields[0].rangeSliderOptions.max = this.model.num1Val;
            }
        }
    }

Документация для ion.RangeSlider (открытые методы внизу): https://github.com/IonDen/ion.rangeSlider

Документация для диапазона Vue-формы-генератора: https://icebob.gitbooks.io/vueformgenerator/content/fields/slider.html

...