Search code examples
vue.jsowl-carouselnuxt.js

Can't select element generated by third-party Vue plugin

I'm using Owl Carousel for Vue. It doesn't seem to work properly since all carousel items are visible in their global container, which is several screens wide (there's no overflow: hidden or any max-width to make only x items visible at a time).

Anyway I find myself forced to apply some container class to a wrapper that the plugin generates dynamically. To that end I do:

mounted () {
    this.$nextTick(() => {
      document.querySelector('.owl-carousel').classList.add('container')
    })
}

But, querySelector('.owl-carousel') is null although I see it in the DOM.

How can I successfully select it?

Solution

  • wow a jquery plugin wrapped into vue ... with like 200 lines of props ...

    props start here: L23

    props end here : L220

    but honestly just add your class here:

    <div :id="elementHandle" :class="['owl-carousel', 'owl-theme', 'your-class-here']">