[Vuejs]-Vue JS How to bind the onChange event to change the value in input

One caveat of Vue’s reactivity system is that you cannot detect changes to an array when you directly set the value of an item via its index.

As explained in the link, there are two main methods of making array modifications reactive:

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

Using these methods forces the VueJS reactivity system to update its state.

To implement this solution in your example, you can use a watcher on a modelled value, an @change event or a @keyup event.

A watcher is likely the most resource intensive approach. I would suggest using @keyup (which would fire on every keypress as opposed to when you unfocus the input with @change) and then debouncing the input if the value is used to filter/sort/load anything.

If you wanted to as well, you could also directly set the entire array.

For example instead of setting value[0] = something you could do value = [...value, something];and this would be reactive.

It is indeed Vue reactivity issuse

You can fix it by not using v-model syntactic sugar but split it like this:

From:

<input type="text" v-model="value[0]" />

to:

<input type="text" :value="value[0]" @input="changeRange(0, $event.target.value)" />

define a method:

methods: {
  changeRange(index, value) {
    const v = parseInt(value, 10) // value from input is always string
    this.$set(this.value, index, v)
  }
}

Update

Above code is a fix you would need anyway but unfortunately the vue-range-component has a different issue as it blocks all user keyboard input to any input element on the same page – see this and this issue

It was already fixed by this pull request but it wasn’t released yet to npm

You can use some of the workarounds described in the issues BUT given the way how the maintainer (not) handles the issue, it would be probably better for you to look around for another component with similar functionality…