基于 Ranger 值的 Vuejs 动态步长设置答案

【问题标题】：Vuejs dynamic step set based on ranger value基于 Ranger 值的 Vuejs 动态步长设置
【发布时间】：2020-01-11 09:51:56
【问题描述】：

我想要实现的是使用具有不同步长值的范围滑块，具体取决于游侠旋钮的位置。

<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;
            }
        }

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

有什么方法可以在不点击鼠标的情况下改变步长值？

【问题讨论】：

标签： vue.js slider range

【解决方案1】：

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

【讨论】：

你已经给出了正确的答案。我在玩sn-p的时候。

【解决方案2】：

@change 仅在您将思考键或鼠标悬停时才会触发。否则，您必须使用 @input 进行更改。

var app = new Vue({
  el:'#app',
  data:{
    loanRangeStep:10,
    loanValue:200
  },
  methods:{
    setSteps() {
          console.log(this.loanValue);
            if (this.loanValue < 300) {
                return this.loanRangeStep = 10;
            } else if (this.loanValue >= 300 && this.loanValue < 500) {
                return this.loanRangeStep = 50;
            } else if (this.loanValue >= 500) {
                return this.loanRangeStep = 100;
            } else {
                return this.loanRangeStep = 100;
            }
        }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdnjs.com/libraries/rangeslider.js"></script>
<div id="app">
<div>Value : {{loanValue}}</div>
<div>
<input :step="loanRangeStep" id="loan_slider" max="1500" min="200" type="range" v-model="loanValue" @input="setSteps"/>
</div>
</div>

【讨论】：