I validate using v-validate. But I want it not to validate when it's disabled.I don't want the radio button to validate when the field I select with it is disabled. How can I do this?
<v-col cols="6" v-if="Type =='İhracat '">
<v-col cols="12" >
<v-text-field
v-model="customer.Company"
outlined
dense
label="Unvan"
name="Company"
:disabled="radios == 'personal' "
v-validate="'required'"
hide-details="auto"
:error="errors.has('Company')"
:error-messages="$t(errors.first('Company')?'Unvan Boş Geçilemez':'')"
></v-text-field>
</v-col>
<v-col cols="6" v-if="Type =='İhracat '">
<v-text-field
v-model="customer.LastName"
label="Soyad"
name="LastName"
v-validate="'required'"
:disabled="radios == 'institution'"
hide-details="auto"
:error="errors.has('LastName')"
:error-messages="$t(errors.first('LastName')?'Soyad Boş Geçilemez':'')"
outlined
dense
></v-text-field>
</v-col>
You can make a computed value by checking if the radios has the desired value
Html
:v-validate="validation"
Computed part
validation () {
return {
required: this.radios == 'institution'
};
}
It seems like you're using vuetify, which already integrate validation functionality.
you can use the props "rules" and provide your validations like this
<v-text-field
v-model="customer.Company"
outlined
dense
label="Unvan"
name="Company"
:rules="[v => !!v || 'Field required']"
:disabled="radios == 'personal' "
hide-details="auto" />
The rules props take an array of functions, boolean or string
it needs to return either true / false or a message
I suggest you to make your rules in a constant to be able to reuse it.
You can now put the condition to not validate when your text-field is disabled
const rules = [v => !!v || (!v && radios == 'personal') || 'Field required']
For more information, visit https://vuetifyjs.com/en/api/v-text-field/#props
to look at the props informations and samples.
Related
<v-data-table
:headers="menuheaders"
//this menus from api response
:items="menus"
item-key="usersmenu_menuid"
items-per-page="1000"
hide-default-footer=""
class="elevation-1"
>
<template v-slot:item.usersmenu_read="{ item }">
<v-checkbox :class="`read${item.usersmenu_read}`" :value="item.usersmenu_read === 1 ? true : false "></v-checkbox>
</template>
<template v-slot:item.usersmenu_edit="{ item }">
<v-checkbox :class="`edit${item.usersmenu_edit}`" :value="item.usersmenu_edit === 1 ? true : false "></v-checkbox>
</template>
<template v-slot:item.usersmenu_add="{ item }">
<v-checkbox :class="`add${item.usersmenu_add}`" :value="item.usersmenu_add === 1 ? true : false "></v-checkbox>
</template>
<template v-slot:item.usersmenu_delete="{ item }">
<v-checkbox :class="`delete${item.usersmenu_delete}`" :value="item.usersmenu_delete === 1 ? true : false "></v-checkbox>
</template>
</v-data-table>
Hi all, i have problem with this code, i want to getElementByClassName
let read = document.getElementsByClassName('read${usersmenu_read}')
But i dont know what i must fill in the flag.
let read = document.getElementsByClassName(In this flag, What should i fill ?)
Please give me some explanation. Thanks for you all
Did you try to use $refs in VueJS instead of using getElementsByClassName. Follow this: https://v2.vuejs.org/v2/api/#ref
<v-checkbox :class="`read${item.usersmenu_read}`" ref="readCheckbox" :value="item.usersmenu_read === 1 ? true : false "></v-checkbox>
// and use it in the component
this.$refs.readCheckbox
Update: for multiple checkbox
You can assign a ref to v-data-table instead directly in v-checkbox, and get all check box in DOM by use Vue $refs same above.
If you want to use getElementsByClass, you can give the checkboxes with a same name that not depend on menus data, say it's "menu-checkbox". Your checkbox will be:
<v-checkbox class="menu-checkbox" :class="`read${item.usersmenu_read}`" :value="item.usersmenu_read === 1 ? true : false "></v-checkbox>
// same for edit/add/delete
Now you can retrieve all checkboxes by:
document.getElementsByClassName('menu-checkbox')
there are two arrays
categoryArr=['test','demo'] and regionArr = ['GJ','MH']
i am using v-chip-groups to display this array values in chips
<v-row>
<v-chip-group
class="float-right"
multiple
v-model="rgSelected"
active-class="deep-purple--text text--accent-2"
>
<v-chip filter v-for="(region,i) in regionArr" :value="region" :key="i">{{region}}</v-chip>
</v-chip-group>
</v-row>
<v-divider class="my-2"></v-divider>
<span style="font-size:1.5rem">Category</span>
<br />
<v-row>
<v-chip-group
class="float-right"
multiple
v-model="ctSelected"
active-class="deep-purple--text text--accent-2"
>
<v-chip filter v-for="(category,i) in categoryArr" :value="category" :key="i">{{category}}</v-chip>
</v-chip-group>
</v-row>
I'm using watch here
watch: {
rgSelected: "showDuedate",
ctSelected: "showDuedate"
}
methods: {
showDuedate() {
console.log(this.ctSelected, this.rgSelected);
}
},
and the v-model are ctSelected =[] and rgSelected = [].
But when i click on 'GJ' the rgSelected = ['GJ']
and after that if i click on 'test' the output displays ctSelected=['GJ','test'] and rgSelected=['GJ'].
Can you tell me what I'm doing wrong here.
I checked it here on mine and there are no errors and all was fine. Seems vuetify version issue, please upgrade it. I solve it after upgrading.
here's the result.
ctSelected: -- rgSelected : GJ
ctSelected: test -- rgSelected : GJ
ctSelected: test,demo -- rgSelected : GJ
the v-chips
Trying to search for data on the TDs of the v-data-table and then return the v-cards with their v-data-tables that have matching data to the search value. This becomes difficult because of the nested iterator/table structure.
I have tried to leverage the search function of the v-data-iterator and within the v-data-table. Have also tried (but failed) to create some sort of custom search function that would return a Boolean that could be used to hide the v-cards that don't have matching data to the search criteria. Ideally, this would work as a real-time search that would match on each character until it did not match... i.e. = search='ab' (still typing) would match on a td customer name "abe" and a business site of "abalone" but would not match if the user typed search='abc' and would not return any v-cards
Codepen Link
<v-layout>
<v-flex xs8 offset-xs2>
<v-text-field
v-model="search"
append-icon="search"
label="Filter Results"
single-line
hide-details
></v-text-field>
</v-flex>
</v-layout>
<v-data-iterator
:items="customerSearchArray"
:rows-per-page-items="[10]"
content-tag="v-layout"
row
wrap
>
<template v-slot:item="props">
<v-flex
pa-1
xs12
>
<v-card :color="props.index % 2 ? 'rgba(31,150,186, 0.2)' : 'white'"
:item-key="props.item.associatedCustomerRecords"
>
<v-card-title><h4>{{props.index + 1}}). {{ props.item.customerName.firstName + ' ' + props.item.customerName.lastName }}</h4></v-card-title>
<v-divider></v-divider>
<v-card-text>
<v-data-table :headers="headers"
class="customer-search-results-table"
:items="props.item.associatedCustomerRecords"
hide-actions
>
<template v-slot:items="props">
TDs to be filtered/searched here....
</template>...
I've seen a component in Element UI for managing the amount of items, it's over here:
https://element.eleme.io/#/en-US/component/input-number
I would want to use something like that in Vuetify, but I cannot find a similar component or even similar style example in Material Design. What's the best way to achieve it?
Yes there is:
<v-text-field
v-model="numberValue"
hide-details
single-line
type="number"
/>
Check out slider component docs for a working example.
Update: This answer pertains to version 1 of Vuetify, yukashima huksay's answer is correct for newer versions of Vuetify.
Setting the type attribute to type="number" is the way to go.
Original:
You could just make your own:
new Vue({
el: '#app',
data () {
return {
foo: 0
}
},
methods: {
increment () {
this.foo = parseInt(this.foo,10) + 1
},
decrement () {
this.foo = parseInt(this.foo,10) - 1
}
}
})
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-text-field v-model="foo" type="number" label="Number" append-outer-icon="add" #click:append-outer="increment" prepend-icon="remove" #click:prepend="decrement"></v-text-field>
</v-container>
</v-content>
</v-app>
</div>
in vuetify.js v2.2.22 to convert your <v-text-field> in number you need write v-model.number
<v-text-field
v-model.number="foo"
label="Number"
append-outer-icon="add"
#click:append-outer="increment"
prepend-icon="remove"
#click:prepend="decrement">
</v-text-field>
type="number" was delete
Some concepts for number inputs get mixed up here.
I can not see type="number" being deleted in 2.2.22 https://github.com/vuetifyjs/vuetify/compare/v2.2.21...v2.2.22 Also I see it being rendered correctly at least in 2.3.10
The input field with attribute type="number" will be handled differently depending on the browser, OS and locale settings (e.g. I am still able to input free text in FF but not Chrome). Typically the keyboard layout changes on smart phones.
v-model.number is purely a directive for Vue. As you can see, internally, Vue simply tries to parse the input with parseFloat and uses that on success - otherwise it will be text and handled as a string in Vue/JS. https://v2.vuejs.org/v2/guide/forms.html#number
Vue vuetify Code
using :rules="maxRules"
<template>
<div>
<v-text-field v-model="text1" :rules="maxRules" label="Credit Amount"></v-text-field>
</div>
</template>
<script>
export default {
data () {
return {
limit:500,
maxRules: [
(v)=> {
if (this.text1 > this.limit) {
return 'Error'
}
}
]
}
}
}
</script>
This question already has answers here:
Vuetify v-select onchange event returns previously selected value instead of current
(5 answers)
Closed 4 years ago.
I am currently working on Vuetify, trying to call a method in Vue.js from v-select using HTML. But the #change event is not properly selecting the conditions.
<v-layout row wrap>
<v-flex xs12 sm4>
<!-- DropDown Combo -->
<v-select v-model="selected"
:items='dropdown_tables'
append-icon='fa-angle-down'
label='Select'
persistent-hint
return-object
single-line
#change='RefreshGrid'
target='#dropdown'>
</v-select>
<!-- <p> {{`${selected}`}} </p> // this code gives the selected combo text -->
</v-flex>
</v-layout>
</v-container>
My Javascript function
methods: {
RefreshGrid: function () {
let cName;
if (this.selected === 'Business Area') {
cName = 'businessArea';
} else if (this.selected === 'Council') {
cName = 'council';
}
let obj = {
vm: this,
collectionName: cName,
action: 'masterData/setMasterData',
mutation: 'setMasterData'
};
this.$store.dispatch(obj.action, obj);
}
So when I use on change, and click on council it shows businessArea data in grid and vice versa. Trying to figure out how the indexing of v-select works.
So, using #input instead of #change works fine.