{"action":"created","issue":{"url":"https://api.github.com/repos/rigor789/vue-scrollto/issues/91","repository_url":"https://api.github.com/repos/rigor789/vue-scrollto","labels_url":"https://api.github.com/repos/rigor789/vue-scrollto/issues/91/labels{/name}","comments_url":"https://api.github.com/repos/rigor789/vue-scrollto/issues/91/comments","events_url":"https://api.github.com/repos/rigor789/vue-scrollto/issues/91/events","html_url":"https://github.com/rigor789/vue-scrollto/issues/91","id":332303041,"node_id":"MDU6SXNzdWUzMzIzMDMwNDE=","number":91,"title":"How can I use vue-scrollto inside a single file component?","user":{"login":"ChucKN0risK","id":3913276,"node_id":"MDQ6VXNlcjM5MTMyNzY=","avatar_url":"https://avatars1.githubusercontent.com/u/3913276?v=4","gravatar_id":"","url":"https://api.github.com/users/ChucKN0risK","html_url":"https://github.com/ChucKN0risK","followers_url":"https://api.github.com/users/ChucKN0risK/followers","following_url":"https://api.github.com/users/ChucKN0risK/following{/other_user}","gists_url":"https://api.github.com/users/ChucKN0risK/gists{/gist_id}","starred_url":"https://api.github.com/users/ChucKN0risK/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ChucKN0risK/subscriptions","organizations_url":"https://api.github.com/users/ChucKN0risK/orgs","repos_url":"https://api.github.com/users/ChucKN0risK/repos","events_url":"https://api.github.com/users/ChucKN0risK/events{/privacy}","received_events_url":"https://api.github.com/users/ChucKN0risK/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-06-14T08:36:12Z","updated_at":"2018-06-14T11:40:29Z","closed_at":null,"author_association":"NONE","body":"I have previously included `vue-scrollto` in my `main.js` file which I use to instanciate my master Vue component.\r\n\r\nI use `vue-scrollto` to have a smooth scroll when I click on an anchor link. I have 2 different components:\r\n- The element I click on\r\n- The view where the scroll happens (its class is `.o-main-view`)\r\n\r\nHere how I included `vue-scrollto` in my `main.js` file:\r\n```js\r\nimport Vue from 'vue';\r\nimport VueScrollTo from 'vue-scrollto';\r\n\r\nVue.use(VueScrollTo, {\r\n  container: '.o-main-view',\r\n  offset: -90,\r\n});\r\n```\r\n\r\nHere's the code attached to my first component, the element I click on: \r\n```\r\nv-scroll-to=\"`#anchor-${subcategory.id}`\"\r\n```\r\n\r\nIt works like a charm, but the only thing I can't do is calling a method in the component (my view) where the scroll happens.\r\n\r\nI can't write in my `main.js` the following:\r\n```js\r\nVue.use(VueScrollTo, {\r\n  container: '.o-main-view',\r\n  onStart: this.myMethod,\r\n  offset: -90,\r\n});\r\n```\r\nThis would refer to the file itself and not the component containing my view. \r\n\r\nMy question is: How can I call a method in my view component as soon as the scroll is triggered by `vue-scrollto` or the user?\r\n\r\nThanks in advance 😉"},"comment":{"url":"https://api.github.com/repos/rigor789/vue-scrollto/issues/comments/397264885","html_url":"https://github.com/rigor789/vue-scrollto/issues/91#issuecomment-397264885","issue_url":"https://api.github.com/repos/rigor789/vue-scrollto/issues/91","id":397264885,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NzI2NDg4NQ==","user":{"login":"ChucKN0risK","id":3913276,"node_id":"MDQ6VXNlcjM5MTMyNzY=","avatar_url":"https://avatars1.githubusercontent.com/u/3913276?v=4","gravatar_id":"","url":"https://api.github.com/users/ChucKN0risK","html_url":"https://github.com/ChucKN0risK","followers_url":"https://api.github.com/users/ChucKN0risK/followers","following_url":"https://api.github.com/users/ChucKN0risK/following{/other_user}","gists_url":"https://api.github.com/users/ChucKN0risK/gists{/gist_id}","starred_url":"https://api.github.com/users/ChucKN0risK/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ChucKN0risK/subscriptions","organizations_url":"https://api.github.com/users/ChucKN0risK/orgs","repos_url":"https://api.github.com/users/ChucKN0risK/repos","events_url":"https://api.github.com/users/ChucKN0risK/events{/privacy}","received_events_url":"https://api.github.com/users/ChucKN0risK/received_events","type":"User","site_admin":false},"created_at":"2018-06-14T11:40:29Z","updated_at":"2018-06-14T11:40:29Z","author_association":"NONE","body":"Thanks a lot for your detailed answer ;)\r\n\r\nI managed to fix my issue by simply listening to the scroll event in my view component.\r\n\r\nThe thing is, the method I wanted to call was not directly tied to vue-scrollto. I only wanted it to be called when the scroll happened in the mainview. \r\n\r\n```js\r\ndata() {\r\n    return {\r\n        scrolled: false,\r\n    };\r\n},\r\nmethods: {\r\n    handleScroll(e) {\r\n        this.scrolled = e.target.scrollTop > 0;\r\n    },\r\n},\r\nmounted() {\r\n    this.$el.addEventListener('scroll', this.handleScroll);\r\n},\r\ndestroyed() {\r\n    this.$el.removeEventListener('scroll', this.handleScroll);\r\n},\r\n```\r\n\r\nYou can close the issue.\r\n\r\nHave a nice day 😎"}}
{"actor":{"display_login":"ChucKN0risK"}}