After iview slider is entered through input or clicks to add or subtract to change the value, on-change cannot get the new value.

problem description

iview slider changes the value by dragging the slider, and the on-change handler gets the new value of v-model.
but after changing the value through input input or clicking on addition or subtraction, the handler is still the old value.

the environmental background of the problems and what methods you have tried

iview-2.14.3,chrome browser

related codes

https://jsfiddle.net/yyrzhm46.

<div id="app">
  <Slider v-for="(item,idx) in arr" v-model="item.value" @on-change="save(idx)" show-input>
  </Slider>
</div>
new Vue({
  el: "-sharpapp",
  data: {
    arr:[{value:11},{value:22}]
  },
  methods: {
    save(idx){
        console.log(this.arr[idx].value)
    }
  }
});

what result do you expect? What is the error message actually seen?

whether you drag slider or enter via input, the on-change handler should have the new value of v-model instead of the old value.

Apr.12,2021

I have the same problem. If you want to use this style component, you have to detach the slider and numberinput components so that you can provide two change events and achieve exactly the same effect, including styles. I think this is a code flaw in iview. Here is my code:

<template>
  <div class="mc-inputSlider" >
    <Slider
      class="slider-item"
      ref="inputSlider"
      v-model="inputValue"
      @on-change="handleSliderChange"
      :tip-format="format"
      :disabled="data.isReadOnly"></Slider>
    <InputNumber
      class="slider-input-item"
      :max="100"
      :min="0"
      v-model="inputValue"
      @on-change="handleInputChange"
      :disabled="data.isReadOnly"></InputNumber>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: null
    };
  },
  methods:{
    handleSliderChange(){
      this.$emit("input", this.inputValue)
    },
    handleInputChange () {
      this.$emit("input", this.inputValue)
    }
  }
}
</script>

<style lang="less" scoped>
.mc-inputSlider {
  display: flex;
  width: 100%;
  height: 100%;

  .slider-item {
    flex: 1;
    margin-right: 20px;
  }

  .slider-input-item {
    width: 80px;
  }
}
</style>
Menu