: Property '0' was accessed during rendering but is not defined on the instance
<p>I'm pretty new to Vue3, I'm building a small starter portal using Vue, and in an "App.vue" file called <code>const ProgressStage = ref(0)</code> Global state and render specific components based on that state. </p>
<p>I also had to emit the passed handler to change the status of the progressStage</p>
<p>View the code here: </p>
<pre class="brush:php;toolbar:false;"><script setup>
import {ref} from '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></pre>
<p>Inside my ComponentB ->
Also, the wrong one is being called:
<strong>In <ComponentB onClientDataAdd=fn onHandlePageNav=fn
In the application. </strong></p>
<pre class="brush:php;toolbar:false;"><script setup>
import {ref} from 'vue'
const emits = defineEmits(['handlePageNav','clientDataAdd']
const data = ref({
name:''
}) (mock object)
</script
<template>
<input v-model="data.name" /></pre>
<p>I have multiple other components that also use state to install themselves dynamically, but ComponentB seems to keep throwing the above warning (on every keystroke in the input)</p>
<p><strong>Hope for some help</strong></p>
