"TypeError: ranges.clickRange is not a function" when setting a custom range slot for vue2-daterange-picker

Question

I use Innologica/vue2-daterange-picker v0.4.3, it was working fine without range slot. I wanted to add range slot by following the official documentation with something like this (made a simple copy paste of how we can use range slot):

    <!--    ranges (new slot syntax) -->
    <template #ranges="ranges">
      <div class="ranges">
        <ul>
          <li v-for="(range, name) in ranges.ranges" :key="name" @click="ranges.clickRange(range)">
            <b>{{name}}</b> <small class="text-muted">{{range[0].toDateString()}} - {{range[1].toDateString()}}</small>
          </li>
        </ul>
      </div>
    </template>

I'm able to see the UI change, BUT when I click on ranges I got this error:

[Vue warn]: Error in v-on handler: "TypeError: ranges.clickRange is not a function"

In my IDE, if I "cmd+click" on the clickRange( ) function, I'm able to see the third party source code, meaning the function exists.

Did anyone have faced similar issue, and how you fixed it ?

Answer 1

I had to update to v0.5.1, it's working perfectly now!