{"action":"created","issue":{"url":"https://api.github.com/repos/declandewet/vue-meta/issues/95","repository_url":"https://api.github.com/repos/declandewet/vue-meta","labels_url":"https://api.github.com/repos/declandewet/vue-meta/issues/95/labels{/name}","comments_url":"https://api.github.com/repos/declandewet/vue-meta/issues/95/comments","events_url":"https://api.github.com/repos/declandewet/vue-meta/issues/95/events","html_url":"https://github.com/declandewet/vue-meta/issues/95","id":228554192,"number":95,"title":"Function-style metaInfo broken with keep-alive","user":{"login":"Eiskis","id":1101002,"avatar_url":"https://avatars3.githubusercontent.com/u/1101002?v=4","gravatar_id":"","url":"https://api.github.com/users/Eiskis","html_url":"https://github.com/Eiskis","followers_url":"https://api.github.com/users/Eiskis/followers","following_url":"https://api.github.com/users/Eiskis/following{/other_user}","gists_url":"https://api.github.com/users/Eiskis/gists{/gist_id}","starred_url":"https://api.github.com/users/Eiskis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Eiskis/subscriptions","organizations_url":"https://api.github.com/users/Eiskis/orgs","repos_url":"https://api.github.com/users/Eiskis/repos","events_url":"https://api.github.com/users/Eiskis/events{/privacy}","received_events_url":"https://api.github.com/users/Eiskis/received_events","type":"User","site_admin":false},"labels":[{"id":471449511,"url":"https://api.github.com/repos/declandewet/vue-meta/labels/enhancement","name":"enhancement","color":"84b6eb","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2017-05-14T17:01:19Z","updated_at":"2017-08-06T11:51:10Z","closed_at":null,"body":"When I use vue-meta with vue-router and `<keep-alive>`, I can't reliably use the function-style metaInfo.\r\n\r\nI have two pages in my application, with the following in their component definitions:\r\n\r\n```js\r\n// Page one\r\n...\r\nmetaInfo: {\r\n\ttitle: 'Hello world!'\r\n},\r\n...\r\n\r\n// Page 2\r\n...\r\nmetaInfo: function () {\r\n\treturn {\r\n\t\ttitle: 'Route name: ' + this.$route.name\r\n\t};\r\n},\r\n...\r\n```\r\n\r\nWhen I load my application and enter page one, I will see \"Hello world!\" as the page title. When I switch to page 2, I will see something like \"Route name: pageTwoRouteName\" as expected. However when I then switch back to page one, the page title is something like \"Route name: pageOneRouteName\". (The route names are what I have defined in my route configuration.)\r\n\r\nIt seems that when using a function to return the values for `metaInfo`, [vue-meta starts $watching for the changes](https://github.com/declandewet/vue-meta/blob/master/src/shared/plugin.js#L55) but never stores or calls the `unwatch` callback that would stop listening to the changes and writing, in my case, a new title for the component that has been transitioned out and deactivated but is still alive in the background.\r\n\r\nIf this is the case then I suspect similar unexpected results happen in any situation where components that use function-style metaInfo are used for a component that is not destroyed when navigating away from them, so it's not vue-router-specific issue even if it's probably the most common use case.\r\n\r\nI can work on a PR later on but maybe someone can confirm if this is what's actually happening. If so, maybe just adding the unwatch callbacks to `deactivated` and `beforeDestroy`  will do the trick."},"comment":{"url":"https://api.github.com/repos/declandewet/vue-meta/issues/comments/320502133","html_url":"https://github.com/declandewet/vue-meta/issues/95#issuecomment-320502133","issue_url":"https://api.github.com/repos/declandewet/vue-meta/issues/95","id":320502133,"user":{"login":"jorngeorg","id":968695,"avatar_url":"https://avatars0.githubusercontent.com/u/968695?v=4","gravatar_id":"","url":"https://api.github.com/users/jorngeorg","html_url":"https://github.com/jorngeorg","followers_url":"https://api.github.com/users/jorngeorg/followers","following_url":"https://api.github.com/users/jorngeorg/following{/other_user}","gists_url":"https://api.github.com/users/jorngeorg/gists{/gist_id}","starred_url":"https://api.github.com/users/jorngeorg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jorngeorg/subscriptions","organizations_url":"https://api.github.com/users/jorngeorg/orgs","repos_url":"https://api.github.com/users/jorngeorg/repos","events_url":"https://api.github.com/users/jorngeorg/events{/privacy}","received_events_url":"https://api.github.com/users/jorngeorg/received_events","type":"User","site_admin":false},"created_at":"2017-08-06T11:51:10Z","updated_at":"2017-08-06T11:51:10Z","body":"Having this problem too. When using keep-alive the meta tags for that view will stay in the DOM. When navigating instead of updating them new ones are added. \r\n\r\nAny ideas for strategies to avoid / circumvent this?"}}
{"actor":{"display_login":"jorngeorg"}}