Bootstrap3 Affix插件在VueJS2中不起作用？

Question

我正在嘗試將Bootstrap "affix" plugin添加到我的演示Vue應用程序，但它不起作用。誰能幫忙？

根據該文檔，我只需要下面的代碼添加到我的JavaScript：

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

直播JSFIDDLE here。

不幸的是，它不會粘貼到頁面滾動頁面上。有任何想法嗎？

Answer 1

問題是，您正在執行該部分呈現之前的詞綴。 所以$（'＃results'）在該階段實際上具有長度0，它在DOM中還不存在。

你的結果部分是你的productType部分，它只是呈現的一部分，當selectedOffice！==「」

這麼一件事，你可以做的是手錶添加到變量，並迫使詞綴後渲染......因此你需要的nextTick

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

看看修改後的fiddler

...但你有另一個小問題是，如果屏幕不寬Ë不管怎樣，你滾動你的詞綴不會出現..這是一些CSS問題，你可以解決與媒體查詢