：屬性「0」在渲染期間被訪問，但未在實例上定義

Question

我對Vue3 還很陌生，我正在使用Vue 建立一個小型入門門戶，並且在名為const ProgressStage = ref(0) 的「App.vue」檔案中使用全域狀態並根據該狀態渲染特定元件。

我還必須發出傳遞的處理程序來更改progressStage的狀態

在此處查看代碼：

<script setup>
import {ref} 從 'vue';
import ComponentA from 'components/componentA.vue' (moc components)
import Component B from 'components/componentB.vue'
const progressStage = ref(0)
const data = ref({})
function handleNavigation(newVal){
  progressStage = newVal
}
function handleClientDataAdd(newData){
 const newData = {...data.value,newData}
 data.value = newData;
}
</script>

<template>
<ComponentA
v-show:progressStage === 0
/>
<ComponentB
@handle-page-nav="handleNavigation"
@handle-client-data="handleClientDataAdd"
v-show:progressStage === 1
/>
</template>

在我的 ComponentB 內部 -> 另外，正在調用錯誤的那個： 在

<script setup>
import {ref} 從 'vue'
const emits = defineEmits(['handlePageNav','clientDataAdd']

const data = ref({
name:''
}) (mock object)
</script

<template>
<input v-model="data.name" />

我有多個其他元件也使用狀態來動態安裝自身，但 ComponentB 似乎不斷（在輸入中的每次擊鍵時）拋出上述警告

希望能得到一些幫助

Answer 1

第一個錯誤是v-show:progressStage === 0。將其變更為：v-show="progressStage === 0"。 文件：v-if-on 範本。 p >

且 已發出 clientDataAdd 但您呼叫事件：handle-client-data。將其變更為：@client-data-add="handleClientDataAdd"

#