Can't get it to work with quasar js framework

[robbelroot]

Hello, i just installed this package via npm and imported everything.

But it's just showing everything next to each other without bigger style.

EDIT: I just found out, that the elements are actually moveable etc, but now i got a new problem. When im using a v-for loop with objects, its getting rendered wrong. Sometimes an image is not equal height to the others and sometimes i get an 'Cannot read property 'filter' of undefined"' error.

[antonreshetov]

Hi @robbelroot

Sometimes an image is not equal heigh

For the style of your carousel you should take care yourself. Vue-glide provides only the functionality of glide.js

As for the error

Cannot read property' filter 'of undefined "'

need more information and examples

[robbelroot]

I could fix this error by using v-once and initializing the array of objects (which are used for the v-for) with null. Now i got a 'Cannot set property 'isStatic' of undefined'. I think it's pretty hard to reproduce the error. I'm not really doing more than importing as mentioned in the tutorial and then binding everything with v-for etc. The currently most important thing for me would be the onclick handler. I tried to bind to the event '@glide:slide-click="openCategory"' and it works, but the problem is i dont know, which one is clicked. I tried to receive the index etc. as mentioned in the documentation by adding a parameter like "index" to the function declaration, but it's always undefined. Thanks for your time.

[stevepop]

@antonreshetov, I am having the same issue with the error Cannot read property' filter 'of undefined ' It happens when looping through objects being passed into each vue-glide-slide slot. This happens in the example below in a NuxtJs project I am working on at the moment;

<template>
  <div class='block'>
      <vue-glide
        type="carousel"
      >
      <vue-glide-slide 
          v-for="competition in competitions" :key="competition.id">
          <div class="competition">
            { competition.name }}
          </div>
          {
        </vue-glide-slide>
    </vue-glide>
  </div>
</template>

See error shown in the console below;

 ERROR  [Vue warn]: Error in render: "TypeError: Cannot read property 'filter' of undefined"                             08:39:50

found in

---> <VueGlide>
       <FeaturedCompetitionList> at components/FeaturedCompetitionList.vue
         <Pages/index.vue> at pages/index.vue
           <Nuxt>
             <Layouts/default.vue> at layouts/default.vue
               <Root>

I hope this helps you understand the problem.

Thanks!

[jackchalat]

For Cannot read property' filter 'of undefined' issue. The array of objects I was looping is a computed property. So i fixed it by using v-if to check if the computed array is ready like this:

<vue-glide
  v-if="photos.length"
>
  <vue-glide-slide
    v-for="(photo, index) in photos"
    :key="index"
  >
    <img :src="photo.src">
  </vue-glide-slide>
</vue-glide>

[robertjoellewis]

@jackchalat Thank you! This solved my issue, which was the same (Cannot read property' filter 'of undefined').