I'm trying to build the form below using vuetify grid.
so far I've only been able to achieve this:
<v-row>
<v-col cols="8">
<v-container>
<v-row no-gutters>
<v-col cols="12" class="d-flex">
<v-text-field
name="title"
label="نام فارسی محصول"
outlined
placeholder=" "
v-model="products.title"
class="ml-1"
></v-text-field>
<v-text-field
name="subtitle"
label="نام انگلیسی محصول"
outlined
placeholder=" "
v-model="products.subtitle"
class="ml-1"
></v-text-field>
<v-text-field
name="image"
label="آدرس عکس محصول"
outlined
placeholder=" "
v-model="products.image"
></v-text-field>
</v-col>
<v-col cols="12">
<v-textarea
name="description"
outlined
label="توضیحات محصول"
placeholder=" "
v-model="products.description"
></v-textarea>
</v-col>
</v-row>
</v-container>
</v-col>
<v-col cols="4">
<v-img :src="require('#/assets/images/upload.png')"></v-img>
</v-col>
<v-col cols="12">
<v-divider light></v-divider>
</v-col>
</v-row>
I have problem lining up the forms with the edges of the upload image and I can't get the textarea to take up the whole height. does anyone have any idea how I can achieve such layout using vuetify? thank you.
You should put your code in v-app tag like this codepen sample
Related
When I open popup, he don't have focus on. I need to press anything inside of window and after that my esc btn will work (for closing window). Any suggest how to focus on popup immediately after button open it?
<v-dialog #keydown.esc="cancel" v-model="show" persistent max-width="750px">
<v-card>
<v-card-title>
<span class="headline"> New Exclusion </span>
</v-card-title>
<v-card-text>
<v-form ref="form" v-model="valid">
<v-container fluid>
<v-row>
<v-col cols="12" md="5">
<v-switch
v-model="percentOrAmountSwitch"
:label="percentOrAmountLabel"
:color="colorTheme.toggle"
></v-switch>
</v-col>
<v-col cols="12" md="2"></v-col>
<v-col cols="12" md="5">
<v-checkbox
label="Expiration Date"
v-model="expDate"
v-on:change="hideShow"
>
</v-checkbox>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="5">
<v-text-field
v-model="percentOrAmount"
:label="percentOrAmountLabel"
dense
:rules="percentOrAmountRules"
required
:prefix="flatDollar"
:suffix="percentBased"
:color="colorTheme.textField"
></v-text-field>
</v-col>
<v-col cols="12" md="2"></v-col>
<v-col cols="12" md="5">
<input
type="date"
v-model="date"
v-if="expDate"
min="1960-01-01"
/>
</v-col>
</v-row>
<v-row>
You can create ref to some input field, for example text on the modal, then focus on that element in modal in the mounted hook and use $vm.nextTick() so that you're sure the element is present in the DOM:
mounted() {
this.$nextTick(() => this.$refs.text.focus());
}
** Here I have v-select element it is not showing for the first element, Vuetify v-select element. Please help **
<template>
<v-app id="inspire">
<v-container align="center">
<v-row>
<v-col cols="12" sm="3" class="categ">
<v-select
cols="12"
sm="3"
class=""
#change="setD"
:items="categories"
v-model="content.cat"
outlined
label="Select Category"
></v-select>
</v-col>
<v-col cols="12" sm="3" class="key">
<v-combobox
#change="setD"
outlined
label="Input Key"
v-model="content.key"
></v-combobox>
</v-col>
<v-row
class="childElements"
v-for="(find, index) in content.data"
:key="index"
>
<v-col cols="12" sm="6" class="key">
<v-select
#change="setD"
:items="languages"
v-model="find.lang"
outlined
label="Select Language"
></v-select>
</v-col>
<v-col xs4 class="childTwo">
<v-combobox
#change="setD"
v-model="find.cont"
outlined
class=""
label="Input Content"
></v-combobox>
</v-col>
</v-row>
</v-row>
<v-row justify="center" class="buttonRow">
<v-btn color="#96CEB4" #click="addFind" class="btnv"
><v-icon class="iconel">mdi-plus</v-icon>
</v-btn>
</v-row>
</v-container>
</v-app>
</template>
** Here I have v-select element it is not showing for the first element, Vuetify v-select element. Is there any way to fix it please share your thoughts and answers I appreciate so much**
** Here I have v-select element it is not showing for the first element, Vuetify v-select element. Is there any way to fix it please share your thoughts and answers I appreciate so much**
You use props which shouldn't be here.
<v-select
#change="setD"
:items="categories"
v-model="content.cat"
outlined
label="Select Category"/>
Are you sure categories and content exist in data()?
When I test my app in mobile portrait mode it looks like this:
Mobile portrait
But I'm trying to make it look like this from Vuetify
In landscape its fantastic, portrait no luck. I'm using fluid and fill-height on the v-container but no luck.
I've also tried height="100vh" on the container but that also didn't work.
This is some sample code that's been simplified and it doesn't work either:
<template>
<v-container fluid fill-height>
<v-layout>
<v-row align="center" justify="center" class="mx-auto">
<v-col cols="8">
<v-card
outlined
class="d-flex"
>
<v-text-field
color="#F03C99"
label="Email"
placeholder="Email for Your Showroom"
outlined
class="ml-4"
></v-text-field>
</v-card>
</v-col>
</v-row>
</v-layout>
</v-container>
</template>
I'm starting to think that it might be that I'm using router-view this is what I have in my router
<template>
<v-app>
<router-view name="navigation" :key="$route.fullPath"></router-view>
<router-view class="fill-height" key="main"></router-view>
<router-view name="confirm"></router-view>
</v-app>
</template>
Here is my real code:
<template>
<v-container fluid fill-height>
<v-layout>
<v-row align="center" justify="center" class="mx-auto">
<v-col :cols="overallColumns">
<v-card
outlined
>
<v-row>
<v-col
:cols="accountForImage"
align="start"
>
<v-card-title>
<v-img src='small-bella-logo.png' max-height="41px" max-width="128px" contain></v-img>
</v-card-title>
<v-form>
<v-text-field
v-model="email"
color="#F03C99"
label="Email"
:rules="[rules.email]"
placeholder="Email for Your Showroom"
outlined
class="ml-4"
:class="marginRight"
:error-messages="errorMessage"
data-cy="login"
></v-text-field>
<v-text-field
v-model="password"
color="#F03C99"
label="Password"
placeholder="Enter your password"
outlined
class="ml-4"
:class="marginRight"
:append-icon="passwordVisible ? 'visibility' : 'visibility_off'"
:type="passwordVisible ? 'text' : 'password'"
#click:append="passwordVisible = !passwordVisible"
data-cy="password"
></v-text-field>
<v-row
class="mt-n5"
>
<v-col
:cols="stackColumns"
align="start">
<v-btn
color="#AF3482"
class="white--text ml-4"
data-cy="login-button"
#click="logInWithBella"
>LOGIN</v-btn>
</v-col>
<v-col
:cols="stackColumns"
:align="alignStackedColumnToEnd"
class="mt-2"
:class="marginLeftWhenStacked"
>
<h1
#click="forgotPassword"
class="caption font-weight-bold ml-4 pointer pink_text"
>FORGOT PASSWORD?</h1>
</v-col>
</v-row>
<v-row align="center" justify="center">
<v-col cols="12" align="center" justify="center">
<v-divider class="ml-4"></v-divider>
</v-col>
</v-row>
<v-row
justify="space-between"
>
<v-col
:cols="columnsFiveAndTwelve"
:align="alignStackedColumnToCenter"
justify="start">
<v-btn
class="ml-4 white--text"
color="#3B5998"
#click="logInWithFacebook()"
medium>
LOGIN WITH FACEBOOK
</v-btn>
</v-col>
<v-col
:cols="columnsFiveAndTwelve"
:align="alignStackedColumnToCenter"
justify="end">
<v-btn
class="white--text"
:class="marginLeftAndNegativeLeft"
color="#DB4437"
#click="logInWithGoogle()"
medium
>
LOGIN WITH GOOGLE
</v-btn>
</v-col>
</v-row>
<v-row align="center" justify="center">
<v-col cols="12" align="center" justify="center">
<v-divider class="ml-4"></v-divider>
</v-col>
</v-row>
<v-row align="start" justify="center">
<v-col cols="12" align="start" justify="center">
<h1 class=" ml-4 font title font-weight-regular">
No Account?
</h1>
<v-btn
class="ml-4 white--text mt-2"
:class="marginBottom"
color="#AF3482"
block
#click="sendAndCreateToken"
>
SIGN UP AND CREATE SHOWROOM
</v-btn>
</v-col>
</v-row>
</v-form>
</v-col>
<v-col
cols="6"
align="center"
class=""
v-if="removeImage"
>
<v-img src="login.png" class="mt-10" max-height="519px" max-width="187px" contain></v-img>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<p>{{ $vuetify.breakpoint.name }}</p>
</v-layout>
</v-container>
</template>
i know i can use v-pagination to build my own table footer
but how can i make it more complicated like what we see above?
<v-data-table
class="elevation-1"
:headers="table.headers"
:items="licenseLogs"
:items-per-page="table.options.itemsPerPage"
:no-data-text="table.options.noDataText"
:page.sync="table.options.page"
hide-default-footer
#page-count="table.options.pageCount = $event"
>
</v-data-table>
<div>
<v-pagination
v-model="table.options.page"
:length="table.options.pageCount"
></v-pagination>
</div>
You have to customize the external footer & pagination. For example...
<v-row class="text-center px-4 align-center">
<v-col class="text-no-wrap shrink">
Total {{ totalRecords }} records
</v-col>
<v-col>
<v-pagination
v-model="page"
:length="pageCount">
</v-pagination>
</v-col>
<v-col>
<v-select
dense
outlined
hide-details
:value="itemsPerPage"
label="Items per page"
#change="itemsPerPage = parseInt($event, 10)"
:items="perPageChoices">
</v-select>
</v-col>
<v-col>
<v-text-field
v-model="page"
label="Go to page"
outlined
hide-details
dense
#input="page = parseInt($event, 10)"
></v-text-field>
</v-col>
</v-row>
Demo
I recently facing a problem when using v-for to iterate large data which has input component. The problem is when i text something into the input field, it take so long to respond (almost 2 second on 1000+ data). here is my v-for
<v-col>
<v-row v-for="item in editedItem.priceList" :key="item.id" no-gutters cols="12">
<v-col cols="7" class="mr-3">
<v-text-field v-model.lazy="item.type" solo :rules="[rules.required]" label="Jenis Barang" />
</v-col>
<v-col cols="2" class="mr-3">
<v-autocomplete
v-model.lazy="item.unit"
:items="unit"
label="Satuan"
solo
/>
</v-col>
<v-col cols="2">
<v-text-field v-model.lazy="item.price" solo :rules="[rules.required]" type="number" label="Harga Satuan" prefix="Rp " />
</v-col>
</v-row>
</v-col>
How can i improve the performance of this code? because i know it will rerender all the component everytime value in input changed.