Vue.js. 자 컴포넌트에 동적으로 변경되는 데이터 전달

Vue.js. 자 컴포넌트에 동적으로 변경되는 데이터 전달

진행 표시줄을 만들고 있습니다. 진행 표시줄 값은 Method submit Action에서 진행 상태를 수신해야 합니다.내 코드는 다음과 같습니다.

1. 부모 컴포넌트

<template>
    <div>
        <progressbar-component :value="progressState"></progressbar-component>
    </div>
</template>
<script>
    import ProgressBar from './Progress.vue'
    export default {
        components: {
            'progressbar-component': ProgressBar
        },
        data () {
            return {
                ...
                progress: 0
                ...
            }
        },
        computed: {
            ...
            progressState () {
                return this.progress
            }
            ...
        },
        methods: {
            ...
            submitAction: function (event) {
                ...
                let percent = 0
                setInterval(function () {
                    if(someState > 0) {
                        this.progress = percent % 100
                        percent += 10
                    }
                }, 200)
                ...
            }
        }
    }
</script>

2. 자(프로그레스바) 컴포넌트

<template>
    <div class="progress">
        {{ value }}
    </div>
</template>
<script>
export default {
    name: 'progressbar-component',
    props: {
        value: {
            type: Number,
            default: 0
        }
    }
}
</script>

목적:

setInterval이 실행 중인 동안 진행 표시줄의 구성 요소에서 값을 업데이트하는 중입니다.

문제:

값이 하위 구성요소에서 업데이트되지 않습니다.

추신.

초기 코드의 일부는 문제 표현을 단순화하기 위해 생략되어 있습니다.

• 이.프로그레스 값이 부모로 올바르게 변화하여 추적할 수 있습니다.
• 또한 디버거 진행 표시줄 구성 요소도 올바르게 작동하고 진행률의 초기 값(0)은 정상적으로 통과했습니다.

시간이 좀 걸렸어요전형적인 실수.문제는 컴포넌트를 실제로 변경하지 않는다는 것입니다.progress항상:

submitAction: function (event) {        
    let percent = 0
    setInterval(function () {
        if(someState > 0) {
            this.progress = percent % 100    // <---- `this` here doesn't refer to the component
            percent += 10
        }
    }, 200)
}

실현하기 위해서:

submitAction: function (event) {        
    let percent = 0
    setInterval(() => {    // <---- arrow function doesn't have their own `this`, so `this.progress` will refer to the components' value
        if(someState > 0) {
            this.progress = percent % 100 
            percent += 10
        }
    }, 200)
}

언급URL : https://stackoverflow.com/questions/49688115/vue-js-passing-dynamically-changing-data-to-child-component