Question

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

<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重复，因为那些将通过@foreach功能循环。因此，并不总是有一个确定的4 ..数据属性的slideLength为4，模板有4个区域，但我真正想要的是循环传递到模板中的任何图像。

感谢任何指示。

Answer 1

我似乎已经通过将支柱传递给组件来解决这个问题：

this.imgCount

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

然后在您的ready方法中设置<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>之后在您的组件模板中：

<input type="file" id="mfile" name="file" class="input display-none optional_check" accept="image/*"/>

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

1 个答案: