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

Question

我正在尝试将Bootstrap "affix" plugin添加到我的演示Vue应用程序中，但它无效。有人可以帮忙吗？

根据文档，我只需要将以下代码添加到我的JavaScript中：

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

直播JSFIDDLE here。

不幸的是，它不会粘贴到页面滚动页面上。有任何想法吗？

Answer 1

问题是你在渲染部分之前正在执行词缀。 所以$（＆＃39;＃results＆＃39;）在该阶段实际上有一个长度为0，它在DOM中还没有存在。

您的结果部分是productType部分的一部分，该部分仅在selectedOffice时呈现！==＆＃39;＆＃39;

所以你可以做的一件事就是为该变量添加一个监视并强制在>渲染之后加上 ...因此你需要nextTick

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

查看修改后的fiddler

...但是你遇到的另一个小问题是，如果屏幕不够宽并且你向上滚动你的词缀就不会出现..这是一些css问题，你可以用媒体查询修复