{"action":"created","issue":{"url":"https://api.github.com/repos/yyx990803/vue/issues/1252","labels_url":"https://api.github.com/repos/yyx990803/vue/issues/1252/labels{/name}","comments_url":"https://api.github.com/repos/yyx990803/vue/issues/1252/comments","events_url":"https://api.github.com/repos/yyx990803/vue/issues/1252/events","html_url":"https://github.com/yyx990803/vue/issues/1252","id":104732338,"number":1252,"title":"Cannot read props on a component that uses v-repeat","user":{"login":"IntellectProductions","id":3689442,"avatar_url":"https://avatars.githubusercontent.com/u/3689442?v=3","gravatar_id":"","url":"https://api.github.com/users/IntellectProductions","html_url":"https://github.com/IntellectProductions","followers_url":"https://api.github.com/users/IntellectProductions/followers","following_url":"https://api.github.com/users/IntellectProductions/following{/other_user}","gists_url":"https://api.github.com/users/IntellectProductions/gists{/gist_id}","starred_url":"https://api.github.com/users/IntellectProductions/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/IntellectProductions/subscriptions","organizations_url":"https://api.github.com/users/IntellectProductions/orgs","repos_url":"https://api.github.com/users/IntellectProductions/repos","events_url":"https://api.github.com/users/IntellectProductions/events{/privacy}","received_events_url":"https://api.github.com/users/IntellectProductions/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-09-03T16:18:20Z","updated_at":"2015-09-03T17:23:45Z","closed_at":"2015-09-03T17:23:45Z","body":"So I'm trying to setup a slideshow. This is what I have so far:\r\n\r\n```html\r\n<slider inline-template img-count=\"4\">\r\n\t<div class=\"slides\" style=\"width:@{{ width }}px\">\r\n\t\t<sliderslide v-repeat=\"4\" inline-template v-ref=\"slide\">\r\n\t\t\t<div class=\"slide\" id=\"slide@{{ $index }}\" style=\"width:@{{ width }}px;height:@{{ height }}px\">\r\n\t\t\t\t<img src=\"{{ gallery_image('HM722_Silver_Creek_9978.jpg', 'full') }}\" alt=\"HM722 Silver Creek\" style=\"margin-top:-15%;\" />\r\n\t\t\t</div>\r\n\t\t</sliderslide>\r\n\t</div>\r\n\r\n\t<div class=\"thumbnails\">\r\n\t\t<div class=\"thumbnail-wrapper\">\r\n\t\t\t<sliderthumb v-repeat=\"4\" send-index=\"@{{ updateIndex }}\" inline-template slide-index=\"@{{ $index }}\" v-ref=\"thumb\">\r\n\t\t\t\t<div class=\"thumb\" style=\"height:@{{ height }}px\" slide-index=\"@{{ $index }}\" v-on=\"click: handleClick\">\r\n\t\t\t\t\t<img src=\"/img/thumbnail.png\" />\r\n\t\t\t\t\t<div class=\"caption\">\r\n\t\t\t\t\t\tNewest Product\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</sliderthumb>\r\n\t\t</div>\r\n\t</div>\r\n</slider>\r\n```\r\n\r\nOf course I'm expecting to loop through my images with some back-end code. I'm using Laravel so I put @ before any brackets.\r\n\r\nSo far this is what I have for my javascript:\r\n\r\n```js\r\nvar Slider = Vue.component('slider', {\r\n\ttemplate: '',\r\n\r\n\tdata: function() {\r\n\t\treturn {\r\n\t\t\tcurrent: 0, // Current slide\r\n\t\t\tspeed: 700, // Speed of animation to slide\r\n\t\t\tmargin: 0, // The margin left on the entire slider container (to flip slides)\r\n\t\t\tcount: 0, // How many slides are in this slider object\r\n\t\t\tthumbnailHeight: 200, // The height of the thumbnails\r\n\t\t\tslideWidth: '',\r\n\t\t\twidth: '',\r\n\t\t\theight: '' // All populated in the ready method\r\n\t\t}\r\n\t},\r\n\r\n\tprops: ['imgCount'],\r\n\r\n\tready: function() {\r\n\t\tthis.count = this.imgCount;\r\n\t\tthis.slideWidth = this.$el.parentElement.offsetWidth;\r\n\t\tthis.height = this.$el.parentElement.offsetHeight;\r\n\t\tthis.width = this.slideWidth * this.count;\r\n\r\n\t\tvar self = this;\r\n\t\tthis.$.slide.forEach(function( slide ) {\r\n\t\t\tself.setSlideDimensions( slide );\r\n\t\t});\r\n\r\n\t\tthis.$.thumb.forEach(function( thumb ) {\r\n\t\t\tself.setThumbDimensions( thumb );\r\n\t\t});\r\n\t},\r\n\r\n\tmethods: {\r\n\t\t// Set default data\r\n\t\tsetDefaults: function() {\r\n\t\t\t// Set width of slide\r\n\t\t\tvar self = this;\r\n\t\t\tthis.$children.forEach( function(slide) {\r\n\t\t\t\tself.setSlideDimensions( slide );\r\n\t\t\t});\r\n\r\n\t\t\tthis.$set('sliderWidth', screen.width * this.count); // Set the width of the slider width\r\n\t\t\tthis.$set('sliderHeight', screen.height); // Set the height of the slider\r\n\t\t},\r\n\r\n\t\t// Set slide width\r\n\t\tsetSlideDimensions: function( slide ) {\r\n\t\t\tslide.width = this.slideWidth;\r\n\t\t\tslide.height = this.height;\r\n\t\t},\r\n\r\n\t\t// Size the thumbnails according to the screen\r\n\t\tsetThumbDimensions: function( thumb ) {\r\n\t\t\tthumb.height = $('.thumbnails').height();\r\n\t\t},\r\n\r\n\t\t// Update index of current slide based on thumb clicked\r\n\t\tupdateIndex: function( index ) {\r\n\t\t\tthis.current = index; // Set current slide to thumbnail img clicked\r\n\t\t\tthis.margin = this.slideWidth * (index); // Set margin how many pixels it should move to the left\r\n\r\n\t\t\tthis.animateSlides(); // ANIMATE SLIDES\r\n\t\t},\r\n\r\n\t\t// Animate slides to move based on margin\r\n\t\tanimateSlides: function() {\r\n\t\t\tvar self = this;\r\n\r\n\t\t\t$('.slides').animate({\r\n\t\t\t\t'margin-left': '-' + self.margin\r\n\t\t\t}, self.speed, function() {\r\n\t\t\t\t// If the current slide is the amount of slides\r\n\t\t\t\tif( self.current === self.count )\r\n\t\t\t\t{\r\n\t\t\t\t\t// Reset slider\r\n\t\t\t\t\tself.current = 1;\r\n\t\t\t\t\t$('.slides').css('margin-left', 0);\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n});\r\n\r\nvar SliderThumb = Vue.component('sliderthumb', {\r\n\ttemplate: '',\r\n\r\n\tdata: function() {\r\n\t\treturn {\r\n\t\t\theight: 200\r\n\t\t}\r\n\t},\r\n\r\n\tprops: ['slideIndex', 'sendIndex'],\r\n\r\n\tready: function() {},\r\n\r\n\tmethods: {\r\n\t\thandleClick: function(e) {\r\n\t\t\tconsole.log( this.slideIndex );\r\n\t\t\tthis.sendIndex( this.slideIndex );\r\n\t\t}\r\n\t}\r\n});\r\n\r\nvar SliderSlide = Vue.component('sliderslide', {\r\n\ttemplate: '',\r\n\r\n\tdata: function() {\r\n\t\treturn {\r\n\t\t\twidth: 500,\r\n\t\t\theight: 500\r\n\t\t}\r\n\t},\r\n\r\n\tprops: [],\r\n\r\n\tready: function() {},\r\n\r\n\tmethods: {}\r\n});\r\n```\r\n\r\nHowever when I try to get the prop from the thumbnail `slide-index` on the sliderthumb component on the `v-on=\"click: handleClick\"` it says undefined. But before I did the `v-repeat` on it, it shows the slide-index. I put spit out the `$index` variable and it's spitting out the right number. I just can't select any props that are passed on a component that uses v-repeat. Is there anyway around this?"},"comment":{"url":"https://api.github.com/repos/yyx990803/vue/issues/comments/137519260","html_url":"https://github.com/yyx990803/vue/issues/1252#issuecomment-137519260","issue_url":"https://api.github.com/repos/yyx990803/vue/issues/1252","id":137519260,"user":{"login":"yyx990803","id":499550,"avatar_url":"https://avatars.githubusercontent.com/u/499550?v=3","gravatar_id":"","url":"https://api.github.com/users/yyx990803","html_url":"https://github.com/yyx990803","followers_url":"https://api.github.com/users/yyx990803/followers","following_url":"https://api.github.com/users/yyx990803/following{/other_user}","gists_url":"https://api.github.com/users/yyx990803/gists{/gist_id}","starred_url":"https://api.github.com/users/yyx990803/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yyx990803/subscriptions","organizations_url":"https://api.github.com/users/yyx990803/orgs","repos_url":"https://api.github.com/users/yyx990803/repos","events_url":"https://api.github.com/users/yyx990803/events{/privacy}","received_events_url":"https://api.github.com/users/yyx990803/received_events","type":"User","site_admin":false},"created_at":"2015-09-03T17:23:45Z","updated_at":"2015-09-03T17:23:45Z","body":"This is a scope gotcha with `v-repeat`: once you use a component with `v-repeat`, the root node is compiled in parent scope. So when you do `slide-index=\"{{$index}}\"` it actually sends in `undefined` because the parent scope doesn't have `$index`. Instead, `$index` is automatically available inside the component. See http://vuejs.org/guide/components.html#Repeat_Component_with_alias\r\n\r\nNote in 1.0.0 `v-repeat` will be replaced by `v-for`, which has a different scoping behavior and works the way you expected.\r\n\r\n"}}