V-select button is not working in Vuetify? - vue.js

** 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()?

Related

Vue how to autofocus v-dialog (popup) when I open it on btn?

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());
}

Vuetify Mobile Fill Entire Screen in Portrait

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>

How to change V-select text colour for label and items?

I've been trying to change v-select text colour for the label and items but can't find the prop to do that, I can change the background-color but not the label or text items inside the v-select. Sample code below
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-row align="center">
<v-col
class="d-flex"
cols="12"
sm="6"
>
<v-select
:items="items"
label="Standard"
background-color="#000000"
color="#ffffff"
></v-select>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
You could use item slot to customize the label rendering :
<v-select :items="items" label="Standard" background-color="#000000" color="#ffffff">
<template #item="{item}">
<span style="color:white; background:blue">{{item.name}}<span>
</template>
</v-select>

How to horizontally align v-combobox with text inside v-col in vuetify

I'm trying to figure out how to horizontally align two v-col, one of this columns has a v-combobox:
<div id="app">
<v-app>
<v-container class="indigo lighten-5">
<v-row no-gutters>
<v-col cols="2">{{ o.id }} </v-col>
<v-col cols="10">
<v-combobox v-model="o.selected" :items="values" dense class="ml-auto"></v-combobox>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
Here there's the codepen
How can I align those two columns?
Add align prop to the row component with center as value :
<v-row no-gutters align="center">
In order to do that, you can add class="d-flex align-center" to the v-row
<div id="app">
<v-app>
<v-container class="indigo lighten-5">
<v-row no-gutters class="d-flex align-center">
<v-col cols="2">{{ o.id }} </v-col>
<v-col cols="10">
<v-combobox v-model="o.selected" :items="values" dense class="ml-auto"></v-combobox>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
Here's the codepen

how can I build such a layout using vuetify grid?

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