{"action":"created","issue":{"url":"https://api.github.com/repos/lukaszflorczak/vue-agile/issues/44","repository_url":"https://api.github.com/repos/lukaszflorczak/vue-agile","labels_url":"https://api.github.com/repos/lukaszflorczak/vue-agile/issues/44/labels{/name}","comments_url":"https://api.github.com/repos/lukaszflorczak/vue-agile/issues/44/comments","events_url":"https://api.github.com/repos/lukaszflorczak/vue-agile/issues/44/events","html_url":"https://github.com/lukaszflorczak/vue-agile/issues/44","id":269878975,"number":44,"title":"prevArrow and nextArrow options being ignored.","user":{"login":"codebysubtract","id":374926,"avatar_url":"https://avatars3.githubusercontent.com/u/374926?v=4","gravatar_id":"","url":"https://api.github.com/users/codebysubtract","html_url":"https://github.com/codebysubtract","followers_url":"https://api.github.com/users/codebysubtract/followers","following_url":"https://api.github.com/users/codebysubtract/following{/other_user}","gists_url":"https://api.github.com/users/codebysubtract/gists{/gist_id}","starred_url":"https://api.github.com/users/codebysubtract/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/codebysubtract/subscriptions","organizations_url":"https://api.github.com/users/codebysubtract/orgs","repos_url":"https://api.github.com/users/codebysubtract/repos","events_url":"https://api.github.com/users/codebysubtract/events{/privacy}","received_events_url":"https://api.github.com/users/codebysubtract/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2017-10-31T08:50:10Z","updated_at":"2017-10-31T09:39:42Z","closed_at":null,"author_association":"NONE","body":"I'm new to `Vue`, so please forgive me if this isn't an issue with  `vue-agile` and I'm just doing it wrong.\r\n\r\nI have my markup setup like this:\r\n\r\n```\r\n<agile class=\"carousel\" :prevArrow=\"leftArrow\" :nextArrow=\"rightArrow\" :dots=\"false\" ref=\"carousel\">\r\n    <div class=\"carousel__slide\">\r\n        <img src=\"/assets/img/temp.png\" alt=\"\"/>\r\n    </div>\r\n    <div class=\"carousel__slide\">\r\n        <img src=\"/assets/img/temp.png\" alt=\"\"/>\r\n    </div>\r\n</agile>\r\n```\r\n\r\nAnd then my Javascript looks like this:\r\n\r\n```\r\nimport VueAgile from 'vue-agile';\r\n\r\nVue.use(VueAgile);\r\n\r\nnew Vue({\r\n    el: '#app',\r\n    data() {\r\n        return {\r\n            menu: false,\r\n            leftArrow: \"<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'><g fill='none' fill-rule='evenodd'><circle cx='25' cy='25' r='25' fill='#292929' opacity='.6' transform='rotate(-90 25 25)'/><path fill='#FFF' d='M14.2906595,25.7004411 L28.3077323,39.7102545 C28.6952783,40.0965818 29.3226866,40.0965818 29.7092414,39.7102545 C30.0967874,39.321946 30.0967874,38.6949071 29.7092414,38.3085798 L16.3929231,25.0000991 L29.7092414,11.6916183 C30.0967874,11.3043005 30.0967874,10.6782521 29.7092414,10.2899436 C29.3226866,9.90361629 28.6952783,9.90361629 28.3077323,10.2899436 L14.2906595,24.299757 C13.9031135,24.6870749 13.9031135,25.3131232 14.2906595,25.7004411'/></g></svg>\",\r\n            rightArrow: \"<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'><g fill='none' fill-rule='evenodd'><circle cx='25' cy='25' r='25' fill='#292929' opacity='.6' transform='rotate(-90 25 25)'/><path fill='#FFF' d='M14.2906595,25.7004411 L28.3077323,39.7102545 C28.6952783,40.0965818 29.3226866,40.0965818 29.7092414,39.7102545 C30.0967874,39.321946 30.0967874,38.6949071 29.7092414,38.3085798 L16.3929231,25.0000991 L29.7092414,11.6916183 C30.0967874,11.3043005 30.0967874,10.6782521 29.7092414,10.2899436 C29.3226866,9.90361629 28.6952783,9.90361629 28.3077323,10.2899436 L14.2906595,24.299757 C13.9031135,24.6870749 13.9031135,25.3131232 14.2906595,25.7004411'/></g></svg>\",\r\n        };\r\n    },\r\n    methods: {\r\n        toggleMenu() {\r\n            this.menu = !this.menu;\r\n        },\r\n    },\r\n});\r\n```\r\n\r\nThe `leftArrow` and `rightArrow` variables are being picked up from `data()` as when I view source on the rendered page they are there in the component declaration (see below), but they are being ignored and the two default arrows  are what I can see on the page.\r\n\r\n```\r\n<div class=\"agile carousel\" prevarrow=\"<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'>...</svg>\" nextarrow=\"<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'>...</svg>\">\r\n   <div class=\"agile__list\">\r\n        <div class=\"agile__track\" style=\"width: 3340px; transform: translate(-668px); transition: transform 0ms ease;\">\r\n...\r\n```\r\n\r\nI'm sure I'm just doing something wrong, so any guidance would really help, thanks."},"comment":{"url":"https://api.github.com/repos/lukaszflorczak/vue-agile/issues/comments/340709394","html_url":"https://github.com/lukaszflorczak/vue-agile/issues/44#issuecomment-340709394","issue_url":"https://api.github.com/repos/lukaszflorczak/vue-agile/issues/44","id":340709394,"user":{"login":"codebysubtract","id":374926,"avatar_url":"https://avatars3.githubusercontent.com/u/374926?v=4","gravatar_id":"","url":"https://api.github.com/users/codebysubtract","html_url":"https://github.com/codebysubtract","followers_url":"https://api.github.com/users/codebysubtract/followers","following_url":"https://api.github.com/users/codebysubtract/following{/other_user}","gists_url":"https://api.github.com/users/codebysubtract/gists{/gist_id}","starred_url":"https://api.github.com/users/codebysubtract/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/codebysubtract/subscriptions","organizations_url":"https://api.github.com/users/codebysubtract/orgs","repos_url":"https://api.github.com/users/codebysubtract/repos","events_url":"https://api.github.com/users/codebysubtract/events{/privacy}","received_events_url":"https://api.github.com/users/codebysubtract/received_events","type":"User","site_admin":false},"created_at":"2017-10-31T09:39:42Z","updated_at":"2017-10-31T09:39:42Z","author_association":"NONE","body":"Sorry (again), it is `prevarrow` and `nextarrow` I can see in the rendered page. I tried `leftarrow` and `rightarrow` just to see if that worked. I've edited my original question.\r\n\r\nI've also tried:\r\n\r\n`<agile class=\"carousel\" :prevArrow=\"left\" :nextArrow=\"right\" :dots=\"false\" ref=\"carousel\">`\r\n\r\nand\r\n\r\n```\r\ndata() {\r\n    return {\r\n      menu: false,\r\n      left: \"<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'><g fill='none' fill-rule='evenodd'><circle cx='25' cy='25' r='25' fill='#292929' opacity='.6' transform='rotate(-90 25 25)'/><path fill='#FFF' d='M14.2906595,25.7004411 L28.3077323,39.7102545 C28.6952783,40.0965818 29.3226866,40.0965818 29.7092414,39.7102545 C30.0967874,39.321946 30.0967874,38.6949071 29.7092414,38.3085798 L16.3929231,25.0000991 L29.7092414,11.6916183 C30.0967874,11.3043005 30.0967874,10.6782521 29.7092414,10.2899436 C29.3226866,9.90361629 28.6952783,9.90361629 28.3077323,10.2899436 L14.2906595,24.299757 C13.9031135,24.6870749 13.9031135,25.3131232 14.2906595,25.7004411'/></g></svg>\",\r\n      right: \"<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'><g fill='none' fill-rule='evenodd'><circle cx='25' cy='25' r='25' fill='#292929' opacity='.6' transform='rotate(-90 25 25)'/><path fill='#FFF' d='M14.2906595,25.7004411 L28.3077323,39.7102545 C28.6952783,40.0965818 29.3226866,40.0965818 29.7092414,39.7102545 C30.0967874,39.321946 30.0967874,38.6949071 29.7092414,38.3085798 L16.3929231,25.0000991 L29.7092414,11.6916183 C30.0967874,11.3043005 30.0967874,10.6782521 29.7092414,10.2899436 C29.3226866,9.90361629 28.6952783,9.90361629 28.3077323,10.2899436 L14.2906595,24.299757 C13.9031135,24.6870749 13.9031135,25.3131232 14.2906595,25.7004411'/></g></svg>\",\r\n    };\r\n  },\r\n```\r\n\r\nSo it more closely matches your example code, but that has the same outcome.\r\n"}}
{"actor":{"display_login":"codebysubtract"}}