jquery - malihu-custom-scrollbar-plugin 带有开箱即用的 vue 动态内容

Question

我正在尝试使用这个 jquery plugin对于 vue，我读到将 jquery 包含在 vue 中是不好的，但我无能为力，因为客户特别要求使用这个插件......

所以我这样做了

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();
    },
}

如果内容是静态的，这会正常工作。但是，如果我使用 v-for 动态加载内容，内容将在可滚动框外创建……顺便说一句，我使用的是 webpack 和单个文件组件。需要帮助

目前我尝试过的解决方案:

像这样使用 watch 在更改时将生成的内容重新附加到容器，但它也不起作用:

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); 


        }
    }

Answer 1

找到了，我应该将绑定(bind)放在 updated() 而不是 mounted() 上，因为我正在动态加载数据...不需要监视它...

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