0

現在、あるスライダーからの入力が別のスライダーの最大値に影響を与える必要があるマルチステップ フォームを設定しています。this.tabSchema.(tab-id).fields[0].rangeSliderOptions.max を使用して最大値を手動で更新できますが、これは UX をまったく変更しません。コンソールで max が正しく更新されたことを確認できますが、UX には古い max が表示されます。

ion.RangeSlider のドキュメントを掘り下げると、.update、.destroy、および .reset メソッドがあることがわかります。ただし、これらには、.update() を呼び出すスライダー オブジェクトを適切にセットアップするために、jquery に固有の関数 .data() が必要なようです。Vueで使用するためのこれに関するドキュメントはありません。これを行う既知の方法はありますか?そうでない場合、誰かがそれを回避する方法を知っていますか?

ETA: リクエストされたコードあり。これは、関連する tabSchema のビットです。tabSchema にはさらに多くのタブがありますが、これらは関連する 2 つです。

               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 rangeslider のドキュメント: https://icebob.gitbooks.io/vueformgenerator/content/fields/slider.html

4

0 に答える 0