: 렌더링 중에 '0' 속성에 액세스했지만 인스턴스에 정의되지 않았습니다.

Question

저는 Vue3을 처음 접했고, Vue를 사용하여 const ProgressStage = ref(0)라는 "App.vue" 파일에 작은 시작 포털을 구축하고 있습니다. 해당 상태를 기반으로 특정 구성요소를 상태화하고 렌더링합니다.

또한 ProgressStage의 상태를 변경하기 위해 전달된 핸들러를 내보내야 했습니다

코드 보기:

<스크립트 설정>
'vue'에서 {ref}를 가져옵니다.
'comComponents/comComponentA.vue'(moc 구성 요소)에서 ComponentA 가져오기
'comComponents/comComponentB.vue'에서 구성요소 B를 가져옵니다.
const 진행단계 = ref(0)
const 데이터 = 참조({})
함수 handlerNavigation(newVal){
  ProgressStage = newVal
}
함수 handlerClientDataAdd(newData){
 const newData = {...data.value,newData}
 data.value = newData;
}
</스크립트>

<템플릿>
<컴포넌트A
v-show:progressStage === 0
/>
<컴포넌트B
@handle-page-nav="handleNavigation"
@handle-client-data="handleClientDataAdd"
v-show:progressStage === 1
/>
</템플릿>

내 ComponentB 내부 -> 또한 잘못된 것이 호출되고 있습니다.

<스크립트 설정>
'vue'에서 {ref} 가져오기
const 방출 = 정의Emits(['handlePageNav','clientDataAdd']

const 데이터 = 참조({
이름:''
}) (모의 객체)
</스크립트

<템플릿>
<input v-model="data.name" />

상태를 사용하여 동적으로 설치하는 다른 구성요소가 여러 개 있는데 ComponentB가 (입력의 모든 키 입력에 대해) 위의 경고를 계속 표시하는 것 같습니다

도움이 되길 바랍니다

Answer 1

첫 번째 실수는 v-show:progressStage === 0。将其更改为：v-show="progressStage === 0"입니다. 문서: v-if-on 템플릿. 피 >

그리고 已发出 clientDataAdd 但您调用事件：handle-client-data。将其更改为：@client-data-add="handleClientDataAdd"