Vue 2 변경 시 범위 입력 값 전달

Vue 2 변경 시 범위 입력 값 전달

Vue 2에서: 저는App컴포넌트, 즉,Slider컴포넌트:

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>

문제는 슬라이더 값이 전달되지 않는다는 것입니다.emit에 있어서의 성명.Slider.vue이유는 알겠는데 어떻게 고쳐야 할지 모르겠어요나는 다음을 시도했다:

v-model="foo"

에서input소품 변이 금지라고 뷰가 경고했어요

프롭을 사용하는 대신 슬라이더에 대한 새 데이터 변수를 만들고 다음과 같이 이 변수를 내보냅니다.

<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>

앱에도 있습니다.vue는 다음과 같이 출력된 이벤트를 나열해야 합니다.

<template>
    <div>
        <Slider :foo="store.foo" @change-foo="changeFoo"></Slider>
    </div>
</template>

언급URL : https://stackoverflow.com/questions/42860075/pass-range-input-value-on-change-in-vue-2