this is a pen : https://codepen.io/wbuc/pen/eYNyXGa
I’m using the v-edit-dialog in the data table to edit a cell inline but when I start typing in the dialog that opens up, it closes directly after the first key press. What am I missing here?
thank you for help!
<v-data-table
v-model="selected"
:headers="headers"
:items="accounts"
:single-select="singleSelect"
item-key="email"
show-select
class="elevation-3"
>
<template v-slot:item.email="props">
<v-edit-dialog
:return-value.sync="props.item.email"
#save="save"
#cancel="cancel"
#open="open"
#close="close"
>
{{ props.item.email }}
<template v-slot:input>
<v-text-field v-model="props.item.email" label="Edit" single-line counter></v-text-field>
</template>
</v-edit-dialog>
</template>
</v-data-table>
i sloved this problem by myself
<v-data-table
.....
item-key="email" <!--Delete this or item-key="id"-->
we can't set a key ,and use it on the v-text-field
Related
There is an example: https://codepen.io/wildhart/pen/oroQpo
How can I make the icon change when expand/collapse node?
You can use a condition based on open prop:
<v-treeview :items="items" transition="true">
<template v-slot:prepend="{ item, open }">
<i v-if="item.children" aria-hidden="true" ...your classes & styles>
{{ open ? 'arrow_drop_up' : 'arrow_drop_down' }}
</i>
</template>
</v-treeview>
I'm trying to put a <v-menu> within the header slot of a <v-data-table>.
This menu would then show filter options (v-autocomplete) for that column.
When the menu is clicked, I can't click the autocomplete to show its items, because then the menu closes.
Is this not possible in Vuetify?
I've tried passing :close-on-click="false" and :close-on-content-click="false"
For example (CodePen):
<v-data-table :items="desserts" :headers="headers">
<template #[`header.calories`]>
<v-menu top>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on"><v-icon>filter</v-icon></v-btn>
</template>
<v-autocomplete class="black" :items="headers" />
</v-menu>
</template>
</v-data-table>
You can use Event.stopPropagation(), it will prevents further propagation of the current event
Eg:
<v-autocomplete #click="clickOnAutocomplete" class="black" :items="headers" />
...
methods: {
clickOnAutocomplete(e) {
e.stopPropagation();
},
}
....
I'm fairly new to vuetify and was wondering if the append-icon prop of v-text-field can be dynamic based on the valid state of the field. I need 2 options:
Option 1:
If there is an error it can be the red alert icon. If its valid it can change to a green checkmark.
Option 2: Only show the error icon if there is an error else hide it.
<v-text-field
v-model="firstname"
:rules="nameRules"
class="text-field"
append-icon="mdi-alert-circle-outline"
placeholder="Enter first name"
hide-details="auto"
outlined
required
>
</v-text-field>
Check this codesanbox I made: https://codesandbox.io/s/stack-73601258-dynamic-prepend-icon-uq729h?file=/src/components/Example.vue
Vuetify components have a thing called slots that you can modify to extend it's functionality. You can find the available slots for each vuetify component at their API documentation page:
https://vuetifyjs.com/en/api/v-text-field/#slots
In this example I modified the icon append slot
<v-form v-model="validForm" ref="myForm" lazy-validation>
<v-card class="pa-5">
<v-text-field v-model="text" :rules="textRules" label="My text field">
<template v-slot:append>
<v-icon v-if="validForm && text.length > 0" color="green">
mdi-check
</v-icon>
<v-icon v-if="!validForm" color="red">
mdi-alert-circle-outline
</v-icon>
</template>
</v-text-field>
<v-btn :disabled="!validForm" color="primary" #click="submitForm">
Submit
</v-btn>
</v-card>
</v-form>
From vuetify'e example, the icon shows up at right side of each row.
But when I making my own, the arrow showed up at the left side, I havent figured out how to control its position.
My code is like following
<v-data-table
:headers="headers"
:items="inputs"
item-key="id"
disable-pagination
dense
show-expand
single-expand
hide-default-footer
>
<template v-slot:[`item.value`]="{ item }">
<v-progress-linear
height="22"
></v-progress-linear
>
</template>
<template v-slot:expanded-item="{headers, item}">
<td :colspan="headers.length">
<InputDetails
:input="item"
/>
</td>
</template>
</v-data-table>
Added one more header into header list did the magic. { text: '', value: 'data-table-expand' },
How to edit the group-by headers of Vuetify <v-data-table> ?
I need to hide the cross and set a custom title.
<v-data-table
:headers="headers"
:items="items"
group-by="category"
></v-data-table>
You just need to override default group.header slot.
<v-data-table
:headers="headers"
:items="items"
group-by="category"
>
<template v-slot:group.header="{items, isOpen, toggle}">
<td :colspan="headers.length">
<v-icon #click="toggle">
{{ isOpen ? 'mdi-minus' : 'mdi-plus' }}
</v-icon>
<span>Your custom header w/o cross</span>
</td>
</template>
</v-data-table>
Check vuetify docs in Slots category to get full list of available props in this slot.