Vuejs - Grab items passed to component template - vue.js

Question

So I have my markup looking like this:
<slider>
<img src="{{ gallery_image('HM722_Silver_Creek_9978.jpg', 'full') }}" alt="HM722 Silver Creek" style="margin-top:-15%;" />
<img src="{{ gallery_image('HM722_Silver_Creek_9978.jpg', 'full') }}" alt="HM722 Silver Creek" style="margin-top:-15%;" />
<img src="{{ gallery_image('HM722_Silver_Creek_9978.jpg', 'full') }}" alt="HM722 Silver Creek" style="margin-top:-15%;" />
<img src="{{ gallery_image('HM722_Silver_Creek_9978.jpg', 'full') }}" alt="HM722 Silver Creek" style="margin-top:-15%;" />
</slider>
It's using the slider component which you can see below:
var Slider = Vue.component('slider', {
template: '#homepage-slideshow',
replace: true,
data: {
current: 1,
speed: 1000,
margin: 0,
slideLength: 4
},
props: {
sliderWidth: 800,
slideWidth: 800,
height: 500,
dataSlide: 1
},
ready: function() {
this.sliderWidth = screen.width * 4;
this.slideWidth = screen.width;
this.height = screen.height;
console.log( this.img );
},
methods: {
thumbnailClick: function(e) {
var slide = $(e.target).data('slide');
var index = $('.slide').index( $('#' + slide) );
this.current = index + 1;
this.margin = this.slideWidth * (index);
this.animateSlides();
},
animateSlides: function() {
var self = this;
$('.slides').animate({
'margin-left': '-' + self.margin
}, self.speed, function() {
if( self.current === self.slideLength )
{
self.current = 1;
$('.slides').css('margin-left', 0);
}
});
}
}
});
The methods are still a mess so disregard those, but I want to try and do a v-repeat of the img tags being passed in since those will be looped through with a #foreach functionality. So there won't always be a definite 4.. The data attribute has a slideLength of 4 and the template has 4 areas, but what I REALLY want is to loop through whatever images are passed into the template.
Thanks for any direction.

Answer 1

I seemed to have gotten past this by passing a prop to the component like so:
<slider img-count="4">
And then accessing it with this.imgCount in my component. I don't know why I didn't think of this before!
Then in your component template after setting this.count = this.imgCount in your ready method:
<script type="text/x-template" id="homepage-slideshow">
<div class="slides" style="width:#{{ sliderWidth }}px">
<article v-repeat="count" id="slide#{{ $index }}" class="slide" style="width:#{{ slideWidth }}px;height:#{{ height }}px">
<content select="img:nth-of-type(#{{ $index + 1 }})"></content>
</article>
</div>
<div class="thumbnails">
<div class="thumbnail-wrapper container">
<img v-repeat="count" src="/img/thumbnail.png" data-slide="slide#{{ $index }}" v-on="click: thumbnailClick" style="height:#{{ thumbnailHeight }}px" />
</div>
</div>
</script>