VueJS 라이프사이클에서 소품 업데이트 시기
나는 부에즈 라이프사이클의 탑재된 후크에 있는 소품들에 접근하려고 하지만 그것은 아무런 가치가 없는 것 같다.
내(실제로 단순화된) 구성 요소는 다음과 같다.
export default {
props: [
'columns',
],
mounted: function() {
console.log(this.columns)
}
}
부모는 다음과 같이 보인다.
<script>
import DatatableHeader from './DatatableHeader.vue';
export default {
data: {
columns: [{'heading': 'Column 1'}, {'heading': 'Column 2'}]
},
components: {
'datatableheader' : DatatableHeader,
}
}
</script>
구성 요소가 올바르게 렌더링되지만 마운트된 함수의 출력은 빈 배열로, 타이밍 문제로 보인다.
내가 뭘 잘못하고 있나요?아니면 내가 사용해야 할 다른 라이프사이클 훅이 있는가?
고마워!
단답은 탑재된 훅에 있는 소품들에 접근할 수 있다는 것이다.이 fiddle을 선택하면 알림에 열의 제목이 표시되는 것을 볼 수 있다.https://jsfiddle.net/yj3k1wLx/1/ 프로그램이 실행 중이지만 빈 배열을 반환한다는 사실은 실제로 열 배열을 전달하고 있지 않음을 나타내는 것 같다. <test :columns="columns">
바이올린과 코드를 비교하여 잘못된 참조 또는 변수가 있는지 확인하십시오.
업데이트 주석에 대한 간단한 대답은 마운트된 루트 후크가 아닌 생성된 후크로 변경하는 것이다.하지만, 난 네가 이 일을 잘못된 방법으로 처리하고 있다는 느낌이 들어.네 코드를 못 봤지만 문제는 네가 어레이를 업데이트하는 데 있다고 생각해.여기에서 주의 사항을 읽고 https://vuejs.org/v2/guide/list.html#Caveats에서 업데이트된 데모를 확인하십시오. https://jsfiddle.net/yj3k1wLx/4/
참조URL: https://stackoverflow.com/questions/40634905/when-are-props-updated-in-the-vuejs-lifecycle
'Programing' 카테고리의 다른 글
확인란을 Vuex 저장소에 바인딩하는 방법? (0) | 2022.04.19 |
---|---|
자바에서 더블틸드(~~)의 의미는 무엇인가? (0) | 2022.04.19 |
필터를 사용하여 배열에서 개체의 여러 키 값을 검색하는 방법 (0) | 2022.04.19 |
coudamalloc()의 사용.왜 이중 포인터가 되는 거지? (0) | 2022.04.19 |
Vue: 사용자 지정 확인란 구성 요소에서 v-model과의 바인딩이 작동하지 않음 (0) | 2022.04.19 |