Vuejs - 抓取传递给组件模板的项目答案

【问题标题】：Vuejs - Grab items passed to component templateVuejs - 抓取传递给组件模板的项目
【发布时间】：2015-11-27 22:36:20
【问题描述】：

所以我的标记看起来像这样：

<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>

它使用的是滑块组件，您可以在下面看到：

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);
                }
            });
        }
    }
});

这些方法仍然是一团糟，所以忽略那些，但我想尝试对传入的 img 标签进行 v-repeat，因为这些标签将通过 @foreach 功能循环。所以不会总是有一个明确的 4.. 数据属性的 slideLength 为 4，模板有 4 个区域，但我真正想要的是循环遍历传递到模板中的任何图像。

感谢您的任何指导。

【问题讨论】：

我似乎已经通过将道具传递给组件来解决这个问题，但我仍然不确定如何循环它们......：<slider img-count="4"> 然后使用@987654324 访问它@ 在我的组件中。我不知道为什么我以前没有想到这个！

标签： vue.js

【解决方案1】：

我似乎已经通过像这样向组件传递一个道具来解决这个问题：

<slider img-count="4">

然后在我的组件中使用this.imgCount 访问它。我不知道为什么我以前没有想到这个！

然后在你的ready方法中设置this.count = this.imgCount之后在你的组件模板中：

<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>

【讨论】：