vue.js - 基于 Ranger 值的 Vuejs 动态步长设置

Question

我想要实现的是根据游侠旋钮的位置使用具有不同步长值的范围 slider 。

<input :step="loanRangeStep" id="loan_slider" max="150000000"
                               min="3000000"
                               type="range" v-model="loanValue" v-on:change="setSteps"/>

在方法中:

            setSteps() {
            if (this.loanValue < 20000000) {
                return this.loanRangeStep = 100000;
            } else if (this.loanValue > 20000000 && this.loanValue < 50000000) {
                return this.loanRangeStep = 500000;
            } else if (this.loanValue > 50000000) {
                return this.loanRangeStep = 1000000;
            } else {
                return this.loanRangeStep = 100000;
            }
        }

发生的情况是，当我移动 slider 上的旋钮时，步长始终为 100.000。如果我将鼠标放在某个范围内，则正确设置步骤。

有没有办法在不点击鼠标的情况下改变步长值？

Answer 1

您想使用 v-on:input而不是 v-on:change .