Error "You must give your menu items a class of 'scrollactive-item' in order to track them."

[craigyu]

Hi, I'm new to VueJS.

I tried to use it but it gives me Error: You must give your menu items a class of 'scrollactive-item' in order to track them.
But I already gave the class name to the <a> tag,
I tried to call the dynamicItemsFunction after but the same error persists.
When the link is clicked, I get this error
Cannot read property 'substr' of undefined
from:
var targetDistanceFromTop = this.getOffsetTop(document.getElementById(event.target.hash.substr(1)));

below is my html code,
Thank you for your help!

<div class="menu-wrapper" :style="{marginTop: 0.117 * bodyWidth + 'px'}">
    <div class="catalogue">
        <scrollactive ref="scrollactive" :offset="offset" :always-track="alwaysTrack" :duration="duration" :click-to-scroll="clickToScroll" :bezier-easing-value="easing">
            <a v-for="aCat in cataArr" v-bind:key="aCat" class="scrollactive-item" href="'#' + aCat.substr(0, 10)">
                <div class="each-cat">
                    {{aCat}}
                </div>
            </a>
        </scrollactive>
    </div>
    <div class="items-wrapper">
        <div class="each-cat-item" v-if="formatCats.length>0" v-for="aCat in formatCats" v-bind:key="aCat" :id="aCat.substr(0, 10)">
            {{aCat}}
            <div class="each-item" v-for="anItem in posts[aCat]" v-bind:key="anItem">
                <div class="item-img" v-if="anItem.photos && anItem.photos.length > 0" @click="jump(anItem)">
                </div>
            </div>
        </div>
    </div>
</div>

[eddiemf]

Can you please provide a fiddle with the error? I'll give it a better look later in the night to see if it's an actual bug with the plugin :)

[craigyu]

Sorry I don't think I'm able provide a js fiddle that reflects my current setting. I'm using scroll active inside a vue component that isn't root.
I got my some data from an http GET request, then processed the data inside created(){}.
Do you think the problem might be caused by the v-for?

[eddiemf]

Yes, that might be the problem, I'll try to debug this later based on your settings, but as far as I've tested, it should work with dynamic items, but I didn't try with v-for. I'll perform some tests and let you know if I find something, thanks for the response :)

[craigyu]

Thank you for the help!

[eddiemf]

Ok, I've managed to reproduce your error. It fires the error message but works correctly after that, I think the problem you have is because you're using code inside href, which is not compiled by Vue as it is just an HTML attribute, you should use :href instead, so this '#' + aCat.substr(0, 10) will be compiled by Vue as actual code, not a String. The way you're doing, you'll get the Cannot read property 'substr' of undefined because the result of that will be a '#' + aCat.substr(0, 10) string.

I'll patch it soon to remove the error when there aren't elements inside the component yet (as in your case when it's rendered by AJAX), but I think you might be just fine doing as I said.

Let me know if it works :)

[craigyu]

Thank you and sorry for the typo, I did use :href and it didn't work.
I reinstalled vue-scrollactive by uninstalling it first. The same problem persists.
The error is triggered by this line still:
var targetDistanceFromTop = this.getOffsetTop(document.getElementById(event.target.hash.substr(1)));

I have some spaces in the ID string, will that cause any problem? it jumps fine under href without vue-scrollactive

[eddiemf]

Oh, that's probably what's going on here, you must not have any spaces in an ID using HTML. Try running document.getElementById(your ID with spaces) and see if it's returning anything. It's jumping to the section without the plugin probably because the browser is fixing it automatically.

Let me know if it works :)

Sent from my Motorola Moto G (4) using FastHub

[craigyu]

I've replaced all the spaces with dashes, still the same error.
The link below is the screenshot of my html code.
If you look at the div with href sides-&-sa, the is-active class is injected into that div, instead of <a>
https://puu.sh/x50fe/7b69c094af.png
I assumed that inner div is causing the trouble so i took it out, now it's working fine!

[eddiemf]

Ohhh, now that makes sense, this inner div was not expected, I just released a quick fix for that, update the plugin and it should work with no more problems regarding that :)

But keep in mind not to use the IDs with space as that will cause unexpected behavior not from the plugin, but the selector won't find it.

Hope everything works now!

[craigyu]

Great, I'll keep that in mind, thank you!