fix: breadcrumb separator is displayed even if next breadcrumb element is not visible quasarframework#1639

Author: rstoenescu

dev/components/components/breadcrumbs.vue

@@ -6,11 +6,16 @@
         <br>
         If window is wide enough then labels are also displayed.
       </p>
+      <q-toggle v-model="first" label="first" />
+      <q-toggle v-model="second" label="second" />
+      <q-toggle v-model="third" label="third" />
+      <br><br>
       <q-breadcrumbs>
-        <q-breadcrumbs-el label="Home" icon="home" />
-        <q-breadcrumbs-el label="Components" icon="widgets" />
-        <q-breadcrumbs-el label="Breadcrumbs" icon="navigation" />
+        <q-breadcrumbs-el v-if="first" label="Home" icon="home" />
+        <q-breadcrumbs-el v-if="second" label="Components" icon="widgets" />
+        <q-breadcrumbs-el v-if="third" label="Breadcrumbs" icon="navigation" />
       </q-breadcrumbs>
+
       <br><br>
       <q-breadcrumbs icon-separator="chevron_right" active-color="secondary" color="light">
         <q-breadcrumbs-el label="Home" to="/" />
@@ -35,3 +40,15 @@
     </div>
   </div>
 </template>
+
+<script>
+export default {
+  data () {
+    return {
+      first: true,
+      second: true,
+      third: true
+    }
+  }
+}
+</script>

src/components/breadcrumbs/QBreadcrumbs.js

@@ -26,20 +26,23 @@ export default {
     }
   },
   render (h) {
+    if (!this.$slots.default) {
+      return
+    }
+
     const
       child = [],
-      length = this.$slots.default.length - 1,
+      len = this.$slots.default.filter(c => c.tag !== void 0 && c.tag.endsWith('-QBreadcrumbsEl')).length,
       separator = this.$scopedSlots.separator || (() => this.separator),
       color = `text-${this.color}`,
       active = `text-${this.activeColor}`
+    let els = 1
 
     for (const i in this.$slots.default) {
       const comp = this.$slots.default[i]
-      if (
-        comp.componentOptions &&
-        ['q-breadcrumbs-el', 'QBreadcrumbsEl', 'qBreadcrumbsEl'].includes(comp.componentOptions.tag)
-      ) {
-        const middle = i < length
+      if (comp.tag !== void 0 && comp.tag.endsWith('-QBreadcrumbsEl')) {
+        const middle = els < len
+        els++
 
         child.push(h('div', {
           'class': [ middle ? active : color, middle ? 'text-weight-bold' : 'q-breadcrumbs-last' ]