In Vue 2: I have an App ponent, which has a Slider ponent:

App.vue

<template>
    <div>
        <Slider :foo="store.foo"></Slider>
    </div>
</template>

<script>
    import store from './ponents/store.js';
    import Slider from './ponents/Slider.vue';

    export default {
        name: 'app',

        ponents: { 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>

The problem is that the value of the slider is not being passed in the emit statement in Slider.vue. I can see why - but I'm not sure how to fix it. I tried doing:

v-model="foo"

in the input element, but Vue gives a warning that I'm not allowed to mutate props.

In Vue 2: I have an App ponent, which has a Slider ponent:

App.vue

<template>
    <div>
        <Slider :foo="store.foo"></Slider>
    </div>
</template>

<script>
    import store from './ponents/store.js';
    import Slider from './ponents/Slider.vue';

    export default {
        name: 'app',

        ponents: { 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>

The problem is that the value of the slider is not being passed in the emit statement in Slider.vue. I can see why - but I'm not sure how to fix it. I tried doing:

v-model="foo"

in the input element, but Vue gives a warning that I'm not allowed to mutate props.

• javascript
• events
• vue.js
• vuejs2

1 Answer 1

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>