Solved the scopedSlot issue of latest vue

A bug exists in current vue(v2.6.11): `v-if` evaluated `false` when component utilized by `<template v-slot="...">` or `<template slot-scope="...">`. This makes `:item` virtually inaccessible. See the issue here: [vue issue#11084](vuejs/vue#11084). Here's the workaround: replace `$slots` with `$scopedSlots`.
guastallaigor · Mar 4, 2021 · 494ef34 · 494ef34
1 parent f1a866f
commit 494ef34
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/src/components/VueHorizontalTimeline.vue b/src/components/VueHorizontalTimeline.vue
@@ -4,16 +4,16 @@
       <ol>
         <li v-for="(item, i) in items" :key="i" :style="setLineColor">
           <div class="time" :class="getTimeClass(item)" :style="getTimeStyles" @click="cardClicked(item)">
-            <slot v-if="$slots.default" v-bind:item="item"/>
+            <slot v-if="$scopedSlots.default" v-bind:item="item"/>
             <span
               class="title"
-              v-if="!$slots.default && item[titleAttr]"
+              v-if="!$scopedSlots.default && item[titleAttr]"
               :class="getTitleClasses">
               {{ item[titleAttr] | textSubstr(titleSubstr) }}
             </span>
             <span
               class="content"
-              v-if="!$slots.default && item[contentAttr]"
+              v-if="!$scopedSlots.default && item[contentAttr]"
               :class="getContentClasses">
               {{ item[contentAttr] | textSubstr(contentSubstr) }}
             </span>