Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Swiper Vue: Uncaught TypeError when using SwiperSlide as a wrapper

See original GitHub issue

Check that this is really a bug

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

Follow our Code of Conduct
Read the docs.
Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.
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

Issue Analytics

State:
Created a year ago
Reactions:7
Comments:7

Top GitHub Comments

1reaction

nyunyu95commented, Aug 20, 2022

I gave up with this plugin…

1reaction

VegetableChicken1024commented, Aug 19, 2022

Same issue using Vue 2.7.x

Top Results From Across the Web

Failed to execute getComputedStyle when using Swiper

Very easy to fix this issue (Remove logos from this element <div class="swiper-wrapper logos"> ). Share.

Swiper Vue.js Components

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

how to get current slide element index in swiper js react

That worked perfect, and you can put your arrows outside the wrapper with ease ... <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div ...

All Swiper.js Instances in Elementor are Now Exposed

Swiper uses the class 'swiper-container' in the slider wrapper element. ... jQuery instance of the carousel's 'swiper-container' element using the ID/class ...

vue-awesome-swiper - npm Package Health Analysis - Snyk

Swiper component for Vue For more information about how to use this package see ... <swiper-slide>Slide 3<swiper-slide> <template #wrapper-end><span>Wrapper ...