2

I am trying to use this jquery plugin with vue, I read its bad to include jquery with vue but I can't help it since client specifically demand to use this plugin...

So i did this

import jquery from "@/assets/js/jquery.js";
import malihu from "@/assets/js/mCustomScrollbar.js";

export default {
    name: 'messages',
    methods:{
        bindScrollbar(){

    $("#content").mCustomScrollbar({
          theme:"kb",
        });

        }
    },
    mounted(){
      this.bindScrollbar();
    },
}

This works normally if the contents are static. But if i load the contents dynamically using v-for, the contents are created outside the scrollable box... Btw, i'm using webpack and single file components. Need help

Solution I tried so far:

re-attach the generated content to the container upon change using watch like this but it does not work also:

watch: {
    'contentValue': function(val,oldVal){
        console.log($("#content")); //<-- log shows that dynamic contents are generated outside the mCSB_container...
        var el = $(".contents").detach();
        $(".mCSB_container").append(el); 


        }
    }
pokken
  • 327
  • 1
  • 15

1 Answers1

2

Found it, I should have put the bind, on updated(), instead of mounted() since i am loading the data dynamically... no need to watch for it...

updated(){
  this.bindScrollbar();
},
pokken
  • 327
  • 1
  • 15