Vue在v-for中显示数组的两个对象

Question

可以在v-for中显示数组的两个对象吗？

就像我想要显示的表彰和项目的UI有一个幻灯片组，其中显示每行两个表扬。

            <v-slide-group>
                <v-slide-item v-for="(n, index) in testimonials" :key="'testimonial-' + index" class="m-4" style="width: 500px;">
                    <div>
                        <div class="row">

                          --- First Testimonial of row ----

                            <div class="col-12 pb-0">
                                <v-icon x-large color="#afbf3a" class="quote-open">
                                    mdi-format-quote-open
                                </v-icon>
                                <v-card class="mb-2" min-width="200" max-width="500" style="border-radius: 20px;">
                                    <v-card-text class="pl-7 pt-7 pr-3 pb-4">
                                        <p v-html="n.text" class="m-0" style="color: #b8b8b8; font-style: italic;">
                                            </p>
                                    </v-card-text>
                                    <v-card-actions class="pb-4">
                                        <div class="d-flex" style="align-items: flex-end;">
                                            <v-avatar class="ml-4 pb-4 avatar-shadow">
                                                <v-img contain :src="n.img"></v-img>
                                            </v-avatar>
                                            <p class="ml-2 font-weight-bold" style="font-size: 13px; color: #afbf3a;">
                                                {{n.name}}</p>
                                        </div>
                                    </v-card-actions>
                                </v-card>
                                <v-icon x-large color="#afbf3a" class="quote-close">
                                    mdi-format-quote-close
                                </v-icon>
                            </div>

                            --- Second Testimonial of row ----

                            <div class="col-12 pb-0 position-relative pt-0" style="left: 50px; bottom: 20px;">
                                <v-icon x-large color="#afbf3a" class="quote-open">
                                    mdi-format-quote-open {{ index = index + 1 }}
                                </v-icon>
                                <v-card class="mb-2" min-width="200" max-width="500" style="border-radius: 20px;">
                                    <v-card-text class="pl-7 pt-7 pr-3 pb-4">
                                        <p v-html="n.text" class="m-0" style="color: #b8b8b8; font-style: italic;">
                                            </p>
                                    </v-card-text>
                                    <v-card-actions class="pb-4">
                                        <div class="d-flex" style="align-items: flex-end;">
                                            <v-avatar class="ml-4 pb-4 avatar-shadow">
                                                <v-img contain :src="n.img"></v-img>
                                            </v-avatar>
                                            <p class="ml-2 font-weight-bold" style="font-size: 13px; color: #afbf3a;">
                                                {{n.name}}</p>
                                        </div>
                                    </v-card-actions>
                                </v-card>
                                <v-icon x-large color="#afbf3a" class="quote-close">
                                    mdi-format-quote-close
                                </v-icon>
                            </div>
                        </div>
                    </div>
                </v-slide-item>
                <v-btn class="position-relative slider-btn" style="right: 10px;" small fab color="white" slot="next">
                    <v-icon small color="#afbf3a">
                        mdi-chevron-right
                    </v-icon>
                </v-btn>
                <v-btn class="position-relative slider-btn" style="left: 10px; z-index: 99999;" small fab color="white" slot="prev">
                    <v-icon small color="#afbf3a">
                        mdi-chevron-left
                    </v-icon>
                </v-btn>
            </v-slide-group>

有没有办法让索引加倍，比如n+2或者类似的东西？感谢和问候！

Answer 1

您可以使用计算属性来创建新的数组或对象。在那里你可以使用一个普通的js for循环。

但是使用v-for的全部原因是能够跳过与第一个相同的代码的第二个testmonial。如果需要较大数组中的两个，可以使用computed属性筛选出要显示的两个。

https://vuejs.org/v2/guide/computed.html