現在、あるスライダーからの入力が別のスライダーの最大値に影響を与える必要があるマルチステップ フォームを設定しています。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