Pass range input value on change in Vue 2
Instead of using prop create a new data variable for slider and pass this variable in the emit, like this:
<template> <div> <input v-model="sliderVal" type="range" min="1" max="100" step="1" @change="changeFoo" /> </div></template><script> export default { props: ['foo'], data: function() { return { sliderVal: "" } } methods: { changeFoo() { this.$emit('changeFoo', this.sliderVal); } } }</script>Also in App.vue you will have to listed to this emitted event like this:
<template> <div> <Slider :foo="store.foo" @change-foo="changeFoo"></Slider> </div></template>