: Auf die Eigenschaft „0' wurde während des Renderns zugegriffen, sie ist jedoch nicht in der Instanz definiert

Question

Ich bin ziemlich neu bei Vue3, ich erstelle ein kleines Starterportal mit Vue und in einer „App.vue“-Datei namens const ProgressStage = ref(0) Geben Sie einen Status an und rendern Sie bestimmte Komponenten basierend auf diesem Status.

Ich musste auch den übergebenen Handler ausgeben, um den Status der progressStage zu ändern

Sehen Sie sich den Code hier an:

<script setup>
{ref} aus 'vue' importieren;
Importieren Sie ComponentA aus „components/componentA.vue“ (moc-Komponenten).
Komponente B aus „components/componentB.vue“ importieren
const progressStage = ref(0)
const data = ref({})
Funktion handleNavigation(newVal){
  progressStage = newVal
}
Funktion handleClientDataAdd(newData){
 const newData = {...data.value,newData}
 data.value = newData;
}
</script>

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

In meiner KomponenteB -> Außerdem heißt es falsch: In

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

const data = ref({
Name:''
}) (Scheinobjekt)
</script

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

Ich habe mehrere andere Komponenten, die ebenfalls den Status verwenden, um sich dynamisch zu installieren, aber ComponentB scheint weiterhin die obige Warnung auszulösen (bei jedem Tastendruck in der Eingabe)

Ich hoffe auf Hilfe

Answer 1

第一个错误是v-show:progressStage === 0。将其更改为：v-show="progressStage === 0"。 文档：v-if-on 模板。p >

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