Vuejs Dynami c шаг установлен на основе значения рейнджера - PullRequest
Новая
       16

Vuejs Dynami c шаг установлен на основе значения рейнджера

2 голосов
/ 11 января 2020

Чего я хотел бы добиться, так это использовать ползунок диапазона с различными значениями шага в зависимости от того, где находится ручка рейнджера. 

<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 за все время. Если я наведен на один из диапазонов, то шаг установлен правильно.

Есть ли способ изменить значение шага без щелчка мышью вверх?

Ответы [ 2 ]

2 голосов
/ 11 января 2020

Вы хотите использовать v-on:input вместо v-on:change.

1 голос
/ 11 января 2020

@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>
...