(Just posted the question but am editing to put the code markups here)
Good morning everyone!
I'm kind of new to Vue and I'm having a weird behavior in my application that is using Vue 3 + Laravel 11.
It's an application similar to Trello (with task cards divided by columns).
I want to pass the ID of the clicked card all the way down to the Checklist.vue component being that the scope of the views is Kanban.vue > CardModal.vue > Checklist.vue (Kanban.vue invokes CardModal.vue and there's an invokation of the Checklist.vue component within Checklist.vue).
On the click event, I'm altering the value of the clickedCard const to the ID of the card and passing it down to the modal:
<CardModal
:cardData="cardData"
:clickedCard="clickedCard"
/>
In CardModal.vue I define clickedCard as a prop and verify its change through
const props = defineProps({
cardData: Object,
showCardModal: Boolean,
clickedCard: Object,
});
watch(() => props.clickedCard, (card) => {
console.log('the ID has changed');
cardClick.value = card;
});
Which effectively does the console log and changes the value of a new const named cardClick.
I have defined cardClick as a new variable to be able to send it down to Checklist.vue which I do through
<Checklist
v-if="cardData?.checklists.length"
v-for="checklist in cardData.checklists"
:cardClick="cardClick"
/>
Within Checklist.vue I do the same process of defining cardClick as a prop and watching its change in state but this watch function does not capture its change for some reason
const props = defineProps({
checklist: Object,
cardClick: Number,
});
watch(() => props.cardClick, () => {
console.log("New card click");
});
Any idea why I'm unable to catch the change in the prop's value?
Thank you in advance