Bootstrap3 AffixプラグインはVueJS2では動作しませんか？

Question

デモのVueアプリケーションにBootstrap "affix" pluginを追加しようとしていますが、動作しません。誰も助けることができますか？

$('#results').affix({ 
    offset: { 
    top: 0 
} 
}); 

ライブ

JSFIDDLE here：

は、ドキュメントによると、私はちょうど私のJavaScriptに次のコードを追加する必要がありました。

不幸なことに、ページスクロールのページには表示されません。何か案は？

Answer 1

問題は、セクションがレンダリングされる前に接辞を実行していることです。 $（ '＃results'）は実際にはそのフェーズで長さ0ですが、まだDOMには存在しません。

あなたの結果セクションがselectedOffice！==「」

だからあなたが行うことができます一つのことは、その変数に時計を追加し、後接辞を強制するときにのみレンダリングされるあなたのでProductType区間の一部であり、したがって、あなたが変更fiddler

を見

watch: { 
    selectedOffice(newValue) { 
    this.$nextTick(() => { 
     $('#results').affix({ 
     offset: { 
      top: 0 
     } 
     }); 
    }); 
    } 
}, 

nextTick

が必要になります...レンダリング...しかし、あなたが持っている別の小さな問題は、画面が広くない場合ということであるEあなたはあなたの接辞をスクロールアップしないでスクロールアップ..それはあなたがメディアクエリで修正することができるいくつかのCSSの問題です