Working with Vue 2, there is an interesting scenario where an App component contains a nested Slider component:
App.vue
<template>
<div>
<Slider :foo="store.foo"></Slider>
</div>
</template>
<script>
import store from './components/store.js';
import Slider from './components/Slider.vue';
export default {
name: 'app',
components: { Slider },
data() {
return {
store: store
}
},
methods: {
changeFoo(foo) {
console.log('change!', foo);
},
},
}
</script>
Slider.vue
<template>
<div>
<input type="range" min="1" max="100" step="1" @change="changeFoo" />
</div>
</template>
<script>
export default {
props: ['foo'],
methods: {
changeFoo() {
this.$emit('changeFoo', foo);
}
}
}
</script>
Encountering a challenge where the value of the slider is not being properly passed in the emit statement within Slider.vue. This issue arises due to restrictions on mutating props in Vue. One attempt to resolve this involved adding:
v-model="foo"
within the input element, but Vue flagged it as an invalid operation that cannot mutate props.