반응형
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
반응형
'programing' 카테고리의 다른 글
Vuetify 플러그인에서 stylush를 제거하고 Vue Js 프로젝트에서 Vuetify SCSS를 추가하는 방법 (0) | 2022.08.13 |
---|---|
VueJ: http 응답 데이터를 캐시하는 최선의 방법 (0) | 2022.08.13 |
JUnit 어설션에서의 어레이 비교, 간결한 임베디드 방식 (0) | 2022.08.13 |
Vuex에서 재사용 가능한 작업 가져오기 (0) | 2022.08.13 |
Axios에서 VUE JS 데이터 액세스 (0) | 2022.08.13 |