Question

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

Vue表单生成器更新范围滑块属性

0 个答案: