Здесь вторая часть.
Пример:
<template>
<div>
<v-container>
<v-carousel
height="600"
show-arrows
>
<v-carousel-item
v-for="item in items"
:key="item.id"
:src="item.src"
cover
>
<div class="carousel_item">
<v-btn :to="'/item/' + item.id">{{ item.title }}</v-btn>
</div>
</v-carousel-item>
</v-carousel>
</v-container>
<v-row class="justify-center" no-gutters>
<v-col
v-for="item in items"
:key="item.id"
cols="12"
lg="3"
md="4"
sm="6"
>
<v-card class="ma-2">
<v-img :src="item.src" height="200px" cover></v-img>
<v-card-title>{{ item.title }}</v-card-title>
<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
<v-card-actions>
<v-btn
color="orange-lighten-2"
variant="text"
:to="'/item/' + item.id"
>
Open
</v-btn>
<v-btn
color="orange-lighten-2"
variant="text"
>
Bay
</v-btn>
</v-card-actions>
<v-card-text>
{{ item.description }}
</v-card-text>
</v-card>
</v-col>
</v-row>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{
id: '1',
title: 'First ad',
subtitle: 'First ad description',
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus incidunt necessitatibus, nesciunt eum ducimus dolorum in officiis error accusamus quod dolorem perferendis aut pariatur, iste, doloremque optio qui. Totam, voluptate?',
promo: false,
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
},
{
id: '2',
title: 'Second ad',
subtitle: 'Second ad description',
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus incidunt necessitatibus, nesciunt eum ducimus dolorum in officiis error accusamus quod dolorem perferendis aut pariatur, iste, doloremque optio qui. Totam, voluptate?',
promo: true,
src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
},
{
id: '3',
title: 'Third ad',
subtitle: 'Third ad description',
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus incidunt necessitatibus, nesciunt eum ducimus dolorum in officiis error accusamus quod dolorem perferendis aut pariatur, iste, doloremque optio qui. Totam, voluptate?',
promo: true,
src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
},
{
id: '4',
title: 'Fourth ad',
subtitle: 'Fourth ad description',
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus incidunt necessitatibus, nesciunt eum ducimus dolorum in officiis error accusamus quod dolorem perferendis aut pariatur, iste, doloremque optio qui. Totam, voluptate?',
promo: false,
src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
},
],
}
},
}
</script>
<style scoped>
.carousel_item {
position: absolute;
bottom: 50px;
left: 50%;
background-color: #00000038;
transform: translate(-50%);
padding: 10px 20px;
border-radius: 5px 5px 0 0;}
</style>
Пример создания элементов из массива на страницах.
Пример:
<template>
<div>
<h1 class="text-center">Orders page</h1>
<v-container>
<v-card class="mx-auto elevation-5" max-width="500">
<v-sheet class="mx-auto pa-2">
<v-list>
<div class="d-flex justify-space-between ma-3"
v-for="order in orders"
:key="order.id"
>
<div class="d-flex">
<v-list-item-action>
<v-checkbox-btn color="success"
:input-value="order.done"
@change="markDone(order)"
></v-checkbox-btn>
</v-list-item-action>
<v-list-item-content class="ma-3">
<v-list-item-title>{{ order.name }}</v-list-item-title>
<v-list-item-subtitle>
{{ order.phone }}
</v-list-item-subtitle>
</v-list-item-content>
</div>
<v-list-item-action>
<v-btn
:to="'/ad/' + order.adId"
>Open</v-btn>
</v-list-item-action>
</div>
</v-list>
</v-sheet>
</v-card>
</v-container>
</div>
</template>
<script>
export default {
data() {
return {
orders: [
{
id: 'oredr001',
name: 'Alexander',
phone: '8-921-21-21-21',
adId: '123',
done: false
},
]
}
},
methods: {
markDone(order) {
order.done = true
}
}
}
</script>
Для начала создадим форму и сделаем ей валидацию.
Пример:
<template>
<div>
<h1 class="text-center">New message page</h1>
<v-container>
<v-card class="mx-auto elevation-5" max-width="500">
<v-sheet class="mx-auto pa-6">
<v-form ref="form" validate-on="lazy" @submit.prevent>
<v-text-field
class="mb-2"
name="title"
label="Title*"
type="text"
v-model="title"
:rules="titleRules"
></v-text-field>
<v-text-field
class="mb-2"
name="subtitle"
label="Subtitle*"
type="text"
v-model="subtitle"
:rules="subtitleRules"
></v-text-field>
<v-text-field
class="mb-2"
name="description"
label="Description*"
type="text"
v-model="description"
:rules="descriptionRules"
></v-text-field>
<v-btn
prepend-icon="mdi-upload"
block class="mt-2"
>Upload Image</v-btn>
<v-card
class="mt-2">
<v-img src="https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg" cover></v-img>
</v-card>
<v-switch
v-model="promo"
label="Add to Promo"
color="success"
hide-details
></v-switch>
<v-btn
block class="mt-4"
@click="createAd"
>Create Msg</v-btn>
</v-form>
</v-sheet>
</v-card>
</v-container>
</div>
</template>
<script>
export default {
data() {
return {
title: '',
titleRules: [
value => {
if (value?.length > 0) return true
return 'Title is required'
}
],
subtitle: '',
subtitleRules: [
value => {
if (value?.length > 0) return true
return 'Subtitle is required'
}
],
description: '',
descriptionRules: [
value => {
if (value?.length > 0) return true
return 'Description is required'
}
],
promo: false,
formvalid: false
}
},
methods: {
async createAd () {
const { valid } = await this.$refs.form.validate()
if (valid) {
const newAdd = {
title: this.title,
subtitle: this.subtitle,
description: this.description,
promo: this.promo,
}
console.log(newAdd);
}
}
}
}
</script>