vue.jsvuejs-slots

Access current component data from within slot template

I have the following vue component

<template>
   <CardGroup>
      <template #headerRight>
         <div>Total items: {{ this.total }}</div>
      </template>
   </CardGroup>
</template>

export default {
   data() {
      return {
         total: 0
      };
   }
}

I don't understand the scoping problem. The this in the slot template is null and I cannot access the this.total data property. I can use that property outside the slot template though. Why this is null inside the slot template?

Solution

  • Vue binds properties automatically, please go through it. data binding

    <div>Total items: {{ total }}</div>