#vuetify.js
#vuetify.js
Вопрос:
Может ли кто-нибудь мне помочь…Я хочу показать карты в карусели.В первом карусели я хочу, чтобы были показаны три карты, а во втором карусели я хочу показать только две карты. моя проблема в том, что в первом carousal и втором carousal отображаются общие карты..
<v-flex>
<v-carousel hide-delimiters style="box-shadow: 0px 0px" prev-icon>
<v-carousel-item v-for="i in 2" :key="i">
<v-layout row>
<v-flex sm4 v-for="j in color" :key="j" pl-2 pr-2>
<v-card :color="j">
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Card {{i}}-{{j}}</h3>
<div> Card text </div>
</div>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</v-carousel-item>
</v-carousel>
</v-flex>
<script>
export default{
data(){
return{
color: ['red','orange','green','primary','error']
}
}
}
</script
Ответ №1:
Проверьте этот codesandbox, который я сделал: https://codesandbox.io/s/stack-70202529-v4251?file=/src/components/CarouselExample.vue
Я предполагаю, что это потому, что вы пытаетесь сгенерировать v-carousel-item
с помощью a v-for
. Вы хотите сгенерировать v-card's
динамическую карту? Если да, то вы получите текст из массива? Если на карточках будет статический текст, вы можете просто создать каждый элемент карусели вручную.