TypeError: Cannot read property 'offsetLeft'

[holic-cl]

Hey,

First of all, thanks and nice job!.

I was trying to use lory with a empty array, waiting to be filled in, but it throws this error when is rendered:

TypeError: Cannot read property 'offsetLeft' of undefined
    at reset (eval at 278 (0.js:59), <anonymous>:378:48)
    at setup (eval at 278 (0.js:59), <anonymous>:325:10)
    at lory (eval at 278 (0.js:59), <anonymous>:609:6)
    at VueComponent.mounted (eval at 272 (0.js:28), <anonymous>:25:87)
    at callHook (eval at <anonymous> (app.js:796), <anonymous>:2754:19)
    at Object.insert (eval at <anonymous> (app.js:796), <anonymous>:1765:5)
    at invokeInsertHook (eval at <anonymous> (app.js:796), <anonymous>:4474:28)
    at VueComponent.patch [as __patch__] (eval at <anonymous> (app.js:796), <anonymous>:4638:5)
    at VueComponent.Vue._update (eval at <anonymous> (app.js:796), <anonymous>:2642:19)
    at VueComponent.updateComponent (eval at <anonymous> (app.js:796), <anonymous>:2609:10)
logError @ vue.common.js?e881:435

I suspect my problem is the empty array. I am using google's firebase on my project, and i was trying to use reactivity to show the items in lory, i don't know if is possible.

My vue component script

  data () {
    return {
      raffles: []
    }
  },

  beforeMount () {
    let ref = window.firebase.database().ref('raffles/')

    ref.once('value', snapshot => {
      snapshot.forEach(childSnapshot => {
        this.raffles.push(childSnapshot.val())
      })
    })
  }

My vue component template:

<template>
  <div>
    <div class="tile is-ancestor">
      <div class="tile is-parent">
        <article class="tile is-child box notification">
          <lory class="js_rewind" :options="{ enableMouseEvents: true, infinite: 1, rewind: true }">
            <item v-for="item in raffles.items" v-if="item.title">
              {{ item.title }}
            </item>
            <prev slot="actions" color="#dbdbdb"></prev>
            <next slot="actions" color="#dbdbdb"></next>
          </lory>
        </article>
      </div>
    </div>
  </div>
</template>

What i am doing wrong, or is it possible?

Regards.

[luventa]

Hi @holic-cl

 <item v-for="item in raffles.items" v-if="item.title">

v-if here will cause lory contains no slider. That's the root cause. The workaround is put <item v-for="item in raffles.items" v-else><item> behind the v-if item.

I think a default item inside lory container shall be added in vue-bulma-lory

Please use the workaround. I will fix this later. Thanks!

[maxschulmeister]

not sure if the issue really is related to the above. I'm getting the same error, using vue-lory with nuxt.js already disabled ssr in the nuxt config plugins config and using it like so:

import Vue from 'vue'
import { Lory, Item, Prev, Next } from 'vue-lory'

Vue.component('lory', Lory)
Vue.component('item', Item)
Vue.component('prev', Prev)
Vue.component('next', Next)

btw i only get the error after generating the static files. any ideas?

[maxschulmeister]

@luventa do you know if there is a fix to make it work with srr yet?

[andreasvirkus]

Any updates on this (SSR-wise)?