$scrollTo is not defined on the instance but referenced during render

ibufu / vue2-scrollspy

Scrollspy for Vue2

https://ibufu.github.io/vue2-scrollspy/

MIT License

135 stars 32 forks source link

$scrollTo is not defined on the instance but referenced during render #5

Closed craigyu closed 6 years ago

craigyu commented 7 years ago

Hi, I'm using this inside a vue component, when I click my tab that has <a @click="$scrollTo(0)">, the console says $scrollTo is not defined.

I tried to put import Scrollspy from 'vue2-scrollspy'; Vue.use(Scrollspy); in either the vue component or index.js, and nothing works.

I'm new to vueJs, thanks for the help!

ibufu commented 7 years ago

See this example. And you could show me your code.

craigyu commented 7 years ago

Hi, I tried your example but it still doesn't work. Here's the code in my index.js


import Scrollspy from 'vue2-scrollspy';
Vue.use(Scrollspy);

export default new Vue({
    el: '#root',
    store: store,
    router:router,
    render: h => h(foo)
});

And here's the code in my component:

<div class="catalogue">
                <a @click="$scrollTo(0)" v-for="aCat in cataArr" v-bind:key="aCat">
                    <div class="each-cat"
                         :class="{active:scrollPos == 0}">
                        {{aCat}}
                    </div>
                </a>
            </div>
            <div class="items-wrapper" :v-scroll-spy="scrollPos">
                <div class="each-cat-item" v-if="formatCats.length>0" v-for="aCat in formatCats" v-bind:key="aCat">
                    {{aCat}}
    </div>
</div> ...

ibufu commented 7 years ago

version of Vue?