I am currently working on capturing the click action state within an HTML v-for generated block for a collapsible function. I have set up a data table and it seems that the state is being captured correctly. However, I am facing an issue where the displayed state always shows as false, even though the console log displays changes in the table fields after clicking. Can someone help me understand why this is happening and provide guidance on how to achieve the expected outcome? I am still new to Vue and may be missing something...
<div v-for="address in userAddressData">
<a @click="expandControl(address.id)">
Address {{expandArea[address.id]}}
</a>
</div>
...
export default {
data () {
return {
userAddressData: '',
expandArea: [false,false,false]
}
},
methods: {
expandControl (id) {
this.expandArea[id] = !this.expandArea[id]
console.log(this.expandArea)
}
},
...