Here is a simplified version of a parent component I created:
// parent component
<template>
<layout
v-for="(value, idx) in array"
:pickUpLength="array.length"
:idx="idx"
:key="idx"
>
<button @click="addArray">add</add>
</template>
data(){
array:[
{"date" : "", "time": ""},
{"date" : "", "time": ""}
]
}
methods:{
addArray(){
this.array.splice(this.array.length - 1, 0, {"yes":"no"})
}
I also have a child component.
<template>
</template>
props:["pickUpLength"],
watch:{
pickUpLength:{
handler(){
console.log(idx)
}
}
}
When the addArray button is clicked in the parent component, the pickUpLength of the child component gets updated as well. However, the problem arises when the console.log(idx) only displays "0, 1" instead of "0, 1, 2", even though there are three items in the array. I'm seeking advice on how to resolve this issue. Thank you for your help and for taking the time to read through it.