Bootstrap3 Affix plugin doesn't work in VueJS2?

Question

I am trying to add the Bootstrap "affix" plugin to my demo Vue application, but it's not working. Can anyone help?

According to the docs, I just needed to add the following code to my JavaScript:

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

Live JSFIDDLE here .

Unfortunatley, it won't affix to the page on page scroll. Any ideas?

Answer 1

The problem is that you are executing the affix before the section is rendered. so $('#results') actually has a length 0 during that phase, it doesn't exist yet in the DOM.

Your result section is part of your productType section, which is only rendered when selectedOffice !== ''

So one thing you can do is add a watch to that variable and force the affix after the render... thus you'll need the nextTick

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

Look at the modified fiddler

... But another small problem you have is that if the screen is not wide enough and you scroll up your affix wont show up.. that is some css problem you could fix with media queries