Dynamic fixed-height about vueper-slides HOT 7 CLOSED

@antoniandre the problem had nothing to do with fixed-height or your library, I fixed it by using vue-lazyload for my v-for loop around the vueperslider. Sorry for the "wrong" issue, I didn't have any other errors so I assumed it could have been a bug.

Working example:

<masonry :cols="masonryCols">
  <lazy-component v-for="(post, index) in posts" :key="index">
    <no-ssr>
      <vueper-slides
        class="no-shadow"
        :visible-slides="1"
        :arrows-outside="false"
        :bullets="false"
        :infinite="false"
        :dragging-distance="100"
        :touchable="true"
        :fixed-height="getSliderHeight()"
        :disable-arrows-on-edges="true"
      >
        <vueper-slide v-for="(img, i) of post.images" :key="i">
          <div slot="slideContent" class="wrap">
            <img src="img" />
          </div>
        </vueper-slide>
      </vueper-slides>
    </no-ssr>
  </lazy-component>
</masonry>

I hope this may helps anyone in the future when trying to use the vuepersliderinside a v-forwith a vue-masonry layout.

Nice documentation btw. and thanks again! :-)

from vueper-slides.

Hi @FabianEllenberger,
this sounds like a Nuxt SSR related problem, as it says document is undefined, which only happens on SSR.
Which of the 3 lines is returning error by the way?

To make it simpler to track, can you provide the full vueper-slides tag as well as what is in setSliderHeight() and what is in your created, mounted and computed please?

Cheers.

from vueper-slides.

Many thanks for the quick response @antoniandre!

The error is from the first line this.$refs.track... seems undefined at this time in the code.
I use the following setup:

<script>
import { VueperSlides, VueperSlide } from 'vueperslides'

export default {
  name: 'PostsList',
  components: {
    VueperSlides,
    VueperSlide
  },
  props: {
    posts: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  methods: {
    setSliderHeight() {
      const newHeight = '50px' // calculate a height here later
      return newHeight
    }
  }
}
</script>

<template>
  <ul class="PostsList">
    <li v-for="(post, index) of posts" :key="index">
      <no-ssr>
        <vueper-slides
          class="no-shadow"
          :visible-slides="1"
          :arrows-outside="false"
          :bullets="false"
          :infinite="false"
          :touchable="true"
          :dragging-distance="100"
          :fixed-height="setSliderHeight()"
          :disable-arrows-on-edges="true"
        >
          <vueper-slide v-for="(img, i) of post.images" :key="i">
            <div slot="slideContent" class="wrap">
              <img
                :src="img.image.sizes.large"
                class="PostsList__post-image"
              >
            </div>
          </vueper-slide>
        </vueper-slides>
      </no-ssr>
    </li>
  </ul>
</template>

<style src='./styles.scss' lang='scss' />

If i set :touchable: false it works fine, since then it doesn't try to set the eventListener of course, i also tried to set touchable true after the slider is initialised, but got the same error. And i really would like to have it touchable since it's an awesome feature ;-)

from vueper-slides.

hi @FabianEllenberger,

I have tried your piece of code in a fresh Nuxt project and can't reproduce the error you have.
So can you also share how you calculate the height and when when you say later in setSliderHeight function?

This is my working sample on default install:

<template>
  <section class="container">
    <div>
      <app-logo/>
      <no-ssr>
        <vueper-slides class="no-shadow"
          :visible-slides="1"
          :arrows-outside="false"
          :bullets="false"
          :infinite="false"
          :touchable="true"
          :dragging-distance="100"
          :fixed-height="setSliderHeight()"
          :disable-arrows-on-edges="true">
          <vueper-slide v-for="i in 7" :key="i" :title="i.toString()" style="background-color: orange"></vueper-slide>
        </vueper-slides>
      </no-ssr>
      <h1 class="title">
        nuxt-test
      </h1>
      <h2 class="subtitle">
        Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
      </div>
    </div>
  </section>
</template>

<script>
import AppLogo from '~/components/AppLogo.vue'
import { VueperSlides, VueperSlide } from 'vueperslides'
import 'vueperslides/dist/vueperslides.min.css'

export default {
  components: { AppLogo, VueperSlides, VueperSlide },
  data: () => ({

  }),
  methods: {
    setSliderHeight () {
      return '100px'
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

from vueper-slides.

@antoniandre thanks for you effort!

I can share it here, but it doesn't matter, since it also doesn't work with the simple code that you used and directly return 100px. I figured out that the problem only appears when i enter the page from another route. If I load it directly it works well.

UPDATE:
It is because I use it in combination with vue-masonry. Seems like it leads to a rendering problem when used together. Separately they both work perfectly and also when entering the route directly it works together, just not when entering from another route.

Maybe i could try to fork and put another if statement around the addEventlistener.

If you have an idea let me know, I will investigate further and let you know when i get it up and running.
Thanks anyways for your time and awesome library! 🎉

from vueper-slides.

Hi @FabianEllenberger,
Great news!
And thanks for taking the time to explain your solution for other users and to close the issue!
Cheers.

from vueper-slides.

<vueper-slides :fixed-height="${windowHeight}px">

new Vue({
    el: '#app',
    data() {
        return {
            windowHeight: window.innerHeight,
            txt: ''
        }
    },

    watch: {
        windowHeight(newHeight, oldHeight) {
            this.txt = `it changed to ${newHeight} from ${oldHeight}`;
        }
    },

    mounted() {
        this.$nextTick(() => {
            window.addEventListener('resize', this.onResize);
        })
    },

    beforeDestroy() { 
        window.removeEventListener('resize', this.onResize); 
    },

    methods: {  
        onResize() {
            this.windowHeight = window.innerHeight
        }
    }
});

from vueper-slides.