1

I am working on a perfect-scrollbar directive.

 yarn add perfect-scrollbar

I found this lying around, but it silently fails. This is the code:

 <template>
  <div class="scroll-area">
   <img src="https://i.kinja-img.com/gawker-media/image/upload/s--I5-_uX-9--/c_scale,fl_progressive,q_80,w_800/oh1cxyrtivnead6tn8k6.png" v-scroll/>
  </div>
 </template>

 <script>
 import { Container, PerfectScrollbar } from 'myCompnts';

 export default {
  name: 'Test',
  data() {
   return {

   };
 },
 directives: {
  scroll: PerfectScrollbar
 },
 components: {
  Container
 },

 };
 </script>

 <style scoped>
 .scroll-area {
  position: relative;
  width: 100px;
  height: 300px;
  overflow: hidden;
 }
 </style>

Unfortunately, it either "no element is specified to initialize PerfectScrollbar", or it gives back these cryptic error messages suggesting an issue with compilation:
console
Just as the element was not passed in correctly. Vue Chrome debugger provides no info on whether the directive actually got there. The idea sounds sexy as hell, but how to implement it? Thanks for any help, really! :)

Jakub Strebeyko
  • 676
  • 1
  • 9
  • 22
  • 1
    You have to initialise the directive on a HTML Node. You do have a stacktrace on PerfectScrollbar.js on line 15. – Sandwell Apr 19 '18 at 13:17
  • Hi there, I'm rather new to all this - could you perhaps rephrase this? Or provide a snippet for this cheap simpleton. – Jakub Strebeyko Apr 19 '18 at 13:40
  • Unfortunatly i can't. But I add to implement a scroll bar on a vue app and this plugin was not good. I went with this one -> https://github.com/BosNaufal/vue2-scrollbar – Sandwell Apr 19 '18 at 15:19

0 Answers0