[Vuejs]-Error using this.$el.queryselector on mounted()

by

0👍

you can use ref instead

<div ref="mainTemplate" class="main-template">
      <template v-if="data" />
    </div>
...
sliderInit(){
    const ImgSlider = this.$refs.mainTemplate
}

0👍

You can use double next tick for example:

 this.$nextTick(() => { this.$nextTick(() => { //code }) })

Other than that you can try to use Flickity-Vue you will not need such a work around but it means other dependency so it is your choice.

Another solution is to select element with vanilla js. You can even write it like as it states in docs:

  var flikty = new Flickity('.main-template', { 
        contain: true, 
        imagesLoaded: true, 
        cellAlign: 'left',
        pageDots: false, 
        arrowShape: 'M 15,50 L 65,100 L 70,95 L 25,50  L 70,5 L 65,0 Z', 
        lazyLoad: 5 }
    )
  }

Leave a comment