{"action":"created","issue":{"url":"https://api.github.com/repos/SSENSE/vue-carousel/issues/138","repository_url":"https://api.github.com/repos/SSENSE/vue-carousel","labels_url":"https://api.github.com/repos/SSENSE/vue-carousel/issues/138/labels{/name}","comments_url":"https://api.github.com/repos/SSENSE/vue-carousel/issues/138/comments","events_url":"https://api.github.com/repos/SSENSE/vue-carousel/issues/138/events","html_url":"https://github.com/SSENSE/vue-carousel/issues/138","id":300799965,"number":138,"title":"Bug: Slide component does not load when carousel's parent component is imported 0.6.8","user":{"login":"DavidVII","id":504075,"avatar_url":"https://avatars1.githubusercontent.com/u/504075?v=4","gravatar_id":"","url":"https://api.github.com/users/DavidVII","html_url":"https://github.com/DavidVII","followers_url":"https://api.github.com/users/DavidVII/followers","following_url":"https://api.github.com/users/DavidVII/following{/other_user}","gists_url":"https://api.github.com/users/DavidVII/gists{/gist_id}","starred_url":"https://api.github.com/users/DavidVII/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DavidVII/subscriptions","organizations_url":"https://api.github.com/users/DavidVII/orgs","repos_url":"https://api.github.com/users/DavidVII/repos","events_url":"https://api.github.com/users/DavidVII/events{/privacy}","received_events_url":"https://api.github.com/users/DavidVII/received_events","type":"User","site_admin":false},"labels":[{"id":508423660,"url":"https://api.github.com/repos/SSENSE/vue-carousel/labels/bug","name":"bug","color":"ee0701","default":true},{"id":508423663,"url":"https://api.github.com/repos/SSENSE/vue-carousel/labels/help%20wanted","name":"help wanted","color":"128A0C","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":8,"created_at":"2018-02-27T21:29:56Z","updated_at":"2018-04-18T14:30:49Z","closed_at":null,"author_association":"NONE","body":"Hello, I ran into an odd issue where the Carousel doesn't display until I click on where the slide would be or trigger a pageChange by clicking on a pagination icon. Even stranger is that the elements are all there in the markup, but they won't display until i click in the general area of the slider.\r\n\r\nThis only seems to occur when I import the components into another component that is being imported as well.\r\n\r\n```js\r\nimport Vue from 'vue'\r\nimport ProductOverview from './components/product-overview.vue'\r\n\r\nconst app = document.getElementById(\"app\")\r\n\r\nnew vue({\r\n  el: app,\r\n  template: \"<ProductOverview />\",\r\n  components: { ProductOverview }\r\n})\r\n```\r\n\r\n```vue\r\n<template>\r\n<div class=\"product\">\r\n  <product-images></product-images>\r\n  <product-form></product-form>\r\n</div>\r\n</template>\r\n\r\n<script>\r\nimport ProductImages from \"./product-images.vue\";\r\nimport ProductForm from \"./product-form.vue\";\r\n\r\nexport default {\r\n  components: {\r\n    ProductImages,\r\n    ProductForm\r\n  }\r\n};\r\n</script>\r\n  \r\n```\r\n\r\n```vue\r\n<template>\r\n  <carousel>\r\n    <slide>\r\n      <img src=\"https://placehold.it/600x400\">\r\n    </slide>\r\n    <slide>\r\n      <img src=\"https://placehold.it/600x400\">\r\n    </slide>\r\n  </carousel>\r\n</template>\r\n\r\n<script>\r\nimport { Carousel, Slide } from \"vue-carousel\";\r\n\r\nexport default {\r\n  components: {\r\n    Carousel,\r\n    Slide\r\n  }\r\n};\r\n</script>\r\n```\r\n\r\nHere are some screenshots as well.\r\n\r\n![initial-load](https://user-images.githubusercontent.com/504075/36755764-0dd53e76-1bc2-11e8-9b2d-8d1eb2fb6085.png)\r\n\r\nI click on one of the pagination circles:\r\n\r\n![after-click](https://user-images.githubusercontent.com/504075/36755782-144e4a72-1bc2-11e8-8d44-580ca213a8ef.png)\r\n"},"comment":{"url":"https://api.github.com/repos/SSENSE/vue-carousel/issues/comments/382407284","html_url":"https://github.com/SSENSE/vue-carousel/issues/138#issuecomment-382407284","issue_url":"https://api.github.com/repos/SSENSE/vue-carousel/issues/138","id":382407284,"user":{"login":"sohailalam2","id":4537238,"avatar_url":"https://avatars3.githubusercontent.com/u/4537238?v=4","gravatar_id":"","url":"https://api.github.com/users/sohailalam2","html_url":"https://github.com/sohailalam2","followers_url":"https://api.github.com/users/sohailalam2/followers","following_url":"https://api.github.com/users/sohailalam2/following{/other_user}","gists_url":"https://api.github.com/users/sohailalam2/gists{/gist_id}","starred_url":"https://api.github.com/users/sohailalam2/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sohailalam2/subscriptions","organizations_url":"https://api.github.com/users/sohailalam2/orgs","repos_url":"https://api.github.com/users/sohailalam2/repos","events_url":"https://api.github.com/users/sohailalam2/events{/privacy}","received_events_url":"https://api.github.com/users/sohailalam2/received_events","type":"User","site_admin":false},"created_at":"2018-04-18T14:30:49Z","updated_at":"2018-04-18T14:30:49Z","author_association":"NONE","body":"Hi @quinnlangille any update on this? \r\n\r\nI am also facing the same issue... here is a snippet of my code - \r\n\r\n```html\r\n<carousel :perPage=\"3\" :navigationEnabled=\"true\" :paginationEnabled=\"false\">\r\n    <slide v-for=\"(mySlide, i) in allSlides\" :key=\"i\">\r\n        <MyComponent :key=\"i\" :myData=\"mySlide\"></MyComponent>\r\n    </slide>\r\n</carousel>\r\n```\r\n\r\nWhere **MyComponent** is a VueJs component which contains the template and some business logic like click listeners etc."}}
{"actor":{"display_login":"sohailalam2"}}