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

Question

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?

Answer 1

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']">

• fork it

• customize it

• npm install <git repo url>