swiper

swiper copied to clipboard

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/s/swiper-navigation-vue-forked-t0r5bc?file=/src/App.vue

Bug description

Check the browser console. You get the warning and error:

Unhandled error during execution of mounted hook

Uncaught` TypeError: Cannot read properties of undefined (reading 'value') at VM54 swiper_vue.js:1229:22

This only happens, if I use my own Slide as a wrapper to add some extra content.

Expected Behavior

No error and warning. You should use the <swiper-slide> in a wrapper as well.

Actual Behavior

Swiper is not initialized.

Swiper version

^8.0.0

Platform/Target and Browser Versions

mac

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

have the same issue :/

Same issue using Vue 2.7.x :(

Same issue using Vue 2.7.x

I gave up with this plugin......

Same issue here with 2.7.x vue version

Same issue using Vue 2.6.x

Also having issues Vue 3 (Nuxt 3 rc.9)

Error comes from swiperRef

    onMounted(() => {
      if (!swiperRef.value) return;
      swiperRef.value.on('_slideClass', updateClasses);
      eventAttached = true;
    });

Possible workaround would be passing ref directly. However, I'm having issues with sliders rendering outside .swiper-wrapper

<template>
  <swiper-slide :swiperRef="swiper">
    <slot />
  </swiper-slide>
</template>

<script>
import { SwiperSlide, useSwiper } from 'swiper/vue'

export default {
  components: {
    SwiperSlide,
  },

  setup() {
    const swiper = useSwiper()

    return {
      swiper,
    }
  },
}
</script>

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Anyone figured a solution for this one ?? I'm stuck and cannot use a wrapper component

Seems like adding the below will work. Any thoughts on it ? This is inside the getChildren function in the get-children.js file.

Basically on top of check if the node is SwiperSlider or an AsyncComp check if it's a wrapper that has some SwiperSlider.

Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.

If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue