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.
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()?
For a specific layout for my application, I need to display certain columns inside certains v-rows only if conditions are met.
The conditions being the same each time, and to avoid re-writing v-col after v-col, I decided to write a component which contains the three columns I which to display inside the row. The idea would be to use it like this:
<v-row justify="start">
<v-col cols="12" md="2">
<!-- My first column, that's always here... -->
</v-col>
<MyComponent v-if="myCondition" :data="myData"/>
</v-row>
In turn, MyComponent looks like this:
<template>
<span>
<v-col cols="12" md="4">
<!-- stuff -->
</v-col>
<v-col cols="12" md="2">
<!-- stuff -->
</v-col>
<v-col cols="12" md="4">
<!-- stuff -->
</v-col>
</span>
When rendering this code however, Vuetify considers the whole MyComponent as being part of a single col, and as such displays it all squished. What I expected is it to render all the columns properly, and to have a full row.
Is there anyway to work around this problem?
The problem here is the span tag. The columns need to be a direct child of the row. I would move the three columns out of the component and back into your main component then wrap those 3 columns in a template tag with the v-if
<v-row justify="start">
<v-col cols="12" md="2">
<!-- My first column, that's always here... -->
</v-col>
<template v-if="myCondition">
<v-col cols="12" md="4"></v-col>
<v-col cols="12" md="4"></v-col>
<v-col cols="12" md="4"></v-col>
</template>
</v-row>
or alternatively as you mentioned. you could use a v-row as the root element in your child component
Parent component
<v-row justify="start">
<v-col cols="12" md="2">
<!-- My first column, that's always here... -->
</v-col>
<v-col v-if="myCondition" cols="12" md="10">
<MyComponent :data="myData"/>
</v-col>
</v-row>
Child component
<v-row>
<v-col cols="12" md="4"></v-col>
<v-col cols="12" md="4"></v-col>
<v-col cols="12" md="4"></v-col>
</v-row>
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
In a form, I would like to get the name attribute value to find error message, I wrote manually the name on the errors messages array and it works.
But I would like to not have to write the input name each time.
Exemple :
<v-container>
<v-row>
<v-col cols="12">
<v-text-field v-model="label" name="label" :error-messages="errors[NAME_ATTRIBUTE_VALUE]" label="Label" #change="resetFormInputValidation" required></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="9">
<v-text-field v-model="mimeType" name="mime_type" :error-messages="errors['mime_type']" label="MIME Type" required></v-text-field>
</v-col>
<v-col cols="3">
<v-text-field v-model="extension" name="file_extension" :error-messages="errors['file_extension']" label="Extension" required></v-text-field>
</v-col>
</v-row>
</v-container>
There is no way you can access the name attribute in that way. To further elabourate my comment, a way will be to declare an array containing all the values for the name attribute, and then iterating through them using v-for. This gives you access to the dynamic name attribute. A proof-of-concept code:
JS:
data: function() {
return {
names: ['name1', 'name2', 'name3']
};
}
Template:
<v-container v-for="(name, i) in names" :key="i">
<v-row>
<v-col cols="12">
<v-text-field v-model="label" :name="name" :error-messages="errors[name]" label="Label" #change="resetFormInputValidation" required></v-text-field>
</v-col>
</v-row>
<!-- Other markup -->
</v-container>