This specific vue component showcases a CardGroup template with a headerRight slot. The content of the slot includes a message displaying the total number of items, accessed through the this.total data property.
<template>
<CardGroup>
<template #headerRight>
<div>Total items: {{ this.total }}</div>
</template>
</CardGroup>
</template>
export default {
data() {
return {
total: 0
};
}
}
The issue arises when accessing the this keyword within the slot template. It seems to be null and prevents me from retrieving or manipulating the this.total property in that specific context. Interestingly, I have no trouble using the same property outside of the slot template.
Can someone explain why the this keyword becomes null inside the slot template?