0

我目前正在设置一个多步表单，其中一个滑块的输入需要影响另一个滑块的最大值。我可以使用 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-form-generator 范围滑块的文档： https ://icebob.gitbooks.io/vueformgenerator/content/fields/slider.html

4

0 回答 0