2017-12-13 8 views
1

私はこれをのvueと一緒に使ってみようとしていますが、vueを使ってjqueryを組み込むのは悪いですが、プラグイン... ボックスの外にある動的な内容の動的な内容を持つmalihu-custom-scrollbar-plugin

は、だから私は内容が静的であれば、これは

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を使用してコンテンツを動的にロードすると、スクロール可能なボックスの外にコンテンツが作成されます.Btw、私はwebpackと単一のファイルコンポーネントを使用しています。

それを見つけた
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); 


     } 
    } 

答えて

1

、私がすべき:

このように見てそれはまた、動作しません使用して変更時にコンテナに生成されたコンテンツを再取り付け:私がこれまで試した

ソリューションを助けが必要ですデータを動的にロードしているので、mounted()の代わりにupdated()にバインドしました。それを監視する必要はありません...

関連する問題