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.
Related
The Vue input fields (v-text-field) automatically show the previous input when I click on the text field.
Actually, I delete the value from all inputs with the blue button (which also creates additional random tables). The reset works, but why is the value displayed again?
What I tried: I used v-form to delete the value of all inputs with this.$refs.form.reset(); (see https://vuetifyjs.com/en/components/forms/#misc). That didn't solve the problem.
This is how it looks:
GIF
HTML
<v-simple-table>
<template v-slot:default>
...
<tbody>
<tr :class="verb.ich">
<td>
<v-text-field label="ich"></v-text-field>
</td>
</tr>
<tr :class="verb.du">
<td>
<v-text-field label="du"></v-text-field>
</td>
</tr>
<tr :class="verb.er">
<td>
<v-text-field label="er/sie/es"></v-text-field>
</td>
</tr>
...
...
</tbody>
</template>
</v-simple-table>
...
<v-btn #click="next"> Weiter </v-btn>
Method next():
next: function () {
var allInputs = document.getElementsByTagName("input");
for (var i = 0, max = allInputs.length; i < max; i++) {
allInputs[i].value = "";
allInputs[i].style.backgroundColor = "white";
}
...
}
Solution
(with the help of Michael Levý's answer)
v-model
<td>
<v-text-field v-model="verb.val[0]"></v-text-field>
</td>
...
reset value
for (var i = 0; i < this.verben.length; i++) {
this.verben[i].val[0] = "";
...
}
in each array
verben: [
{
val: ["", "", "", "", "", ""],
...
}
v-text-field has some internal variable which saves the value when you are typing. Your next() method doesn't clear this value but only sets value of the rendered <input> control - when you click on the control, v-text-field is re-rendered and shows the value stored inside
Your next method is an example how not to work with form items in Vue. Vue is data driven. For each control you need a variable in data() section of your component and use v-model to bind the control to that variable.
Now when you want to change the value programmatically, you change the data in your component (not in the DOM)
Form Input Bindings
Vuetify form controls works same way - examples
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>
I am using polymer.I have array of objects it looks
[{
name:xxx,
address:yyy,
times:[
{start:12,
End:5
},
{start:2,
End:4
}
]
},
{//same format repeats
}
]
I used nested dom-repeat,
<template is="dom-repeat" items="{{pList}}" as="list">
<paper-item>
<paper-item-body two-line>
<div>[[list.address]]</div>
<div secondary>[[list.name]]</div>
</paper-item-body>
<template is="dom-repeat" items={{list.times}} as="time">
<paper-item-body on-tap="_handleTime" two-line>
<div>[[time.start]]</div>
<div>[[time.end)]]</div>
</paper-item-body>
</template>
</paper-item>
</template>
I have on tap function in second dom-repeat,so on taping below function is called,here I can access time object.
how can I access name and address which is in first dom-repeat using with 'e' reference as bellow?
I tried parentElement but its not working!
_handleTime:function(e) {
console.log(e.model.time); //displays time obj i.e {start:12,End:5} but I'm trying to get {name,address,{start,end}}
console.log(e.parentElement);//gives error
//I'm trying to get entire object like {name:xxx,address:yyy,times:[]}
}
var item = this.$.firstRepeat.itemForElement(e.target);
where firstRepeat is the id of the first dom-repeat,
check this example