I have customized the v-data-table header with text-field for searching to make the function compact. But I can not prevent the sort click function on text-field.
Step to Reproduce:
<div id="app">
<v-app>
<v-main>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
>
<template v-slot:header.calories="{ header }">
<v-text-field label="search calories"></v-text-field>
</template>
</v-data-table>
</v-main>
</v-app>
</div>
Please click this Codepen link
Please click on search calories one to two times, it sorts asc or desc.
I want to stop the sort function only on the header text or custom text-field, because there is a sort icon right side of it.
Put a #click.stop on the v-text-field:
<template v-slot:header.calories="{ header }">
<v-text-field label="search calories" #click.stop />
</template>
This will stop the click event from propagating into the header.
Related
I have this v-data-table, witch one shows the result from a request to api, also it allows me to edit them, in the text-field it sets the information correctely, but the problem is it doesn't set the information in the autocomplete select:
<v-data-table
:headers="cabeceras"
:items="tablaRepuestos"
sort-by="Repuesto"
class="elevation-1"
no-results-text="No se encontraron resultados"
no-data-text="No ha cargado Ningun Dato"
>
<template v-slot:[`item.itg_descripcion`]="props">
<v-autocomplete
v-model="props.item.itg_descripcion"
:items="fillModRepuestos.listaRepuestos"
item-value="itg_id"
item-text="itg_descripcion"
label="Repuestos"
height="20"
return-object
#change="cambioRepuesto(props.item.itg_descripcion)"
no-data-text="No hay coincidencias"
clearable
></v-autocomplete>
</template>
<template v-slot:[`item.cantidad`]="props">
<v-text-field
v-model="props.item.cantidad"
label="Cantidad"
clearable
type="number"
></v-text-field>
</template>
<template v-slot:[`item.actions`]="{ item }">
<v-tooltip bottom mg="1">
<template v-slot:activator="{ on, attrs }">
<v-btn
v-bind="attrs"
v-on="on"
color="red"
small
fab
dark
#click="eliminarRepuesto(item)"
class="ml-2"
>
<v-icon>mdi-delete</v-icon>
</v-btn>
</template>
<span>Eliminar Repuesto</span>
</v-tooltip>
</template>
</v-data-table>
this shows the v-data-table right now:
but it should shows this:
the autocomplete select load the list correctly but the problem, as I said, is they don't load the information from the field itg_descripcion, how can I resolve this problem?
You have configured your v-autocomplete to use itg_id as it's item-value, this means you need to pass the itg_id to it's v-model in order to work properly. But in your code you are passing props.item.itg_descripcion.
If you have the itg_id in your props.item object, you just need to use that instead.
<v-autocomplete
v-model="props.item.itg_id"
:items="fillModRepuestos.listaRepuestos"
item-value="itg_id"
item-text="itg_descripcion"
label="Repuestos"
height="20"
return-object
#change="cambioRepuesto(props.item.itg_descripcion)"
no-data-text="No hay coincidencias"
clearable
></v-autocomplete>
If not, you can configure it to work with itg_descripcion only. But imo using id's it's safer.
<v-autocomplete
v-model="props.item.itg_descripcion"
:items="fillModRepuestos.listaRepuestos"
item-value="itg_descripcion"
item-text="itg_descripcion"
label="Repuestos"
height="20"
return-object
#change="cambioRepuesto(props.item.itg_descripcion)"
no-data-text="No hay coincidencias"
clearable
></v-autocomplete>
I already have a v-data-table of vuetify and i want to convert its contents from a data table to a drop down using v-select. How is it possible to do the change?
<v-data-table
dense
v-if="requester_details.credential_type == 'TEMPLATE'"
class="elevation-0"
hide-default-footer
:headers="templateResultHeaders"
#click:row="handleRowClickTemplate"
:items="GetAllTemplatesList"
:no-data-text="noDataText"
>
<template v-slot:[`item.template_name`]="{ item }">
<div>{{ item.template_name }}</div>
</template>
<template v-slot:[`item.Action`]="{}">
<v-icon color="primary">mdi-chevron-right</v-icon>
</template>
</v-data-table>
Well did this and it works as expected. Writing "return object" is important to open the content of the v-select fields
<v-select
v-if="requester_details.credential_type == 'TEMPLATE'"
class="FontSize field_height field_label_size"
dense
placeholder="Template items"
outlined
:items="GetAllTemplatesList"
item-text="template_name"
#change="handleRowClickTemplate"
return-object
>
</v-select>
Good morning,
I know that
<v-data-table
:headers="headersfav"
:items="itemsfav"
#click:row="showSaleslead"
>
can start an action when the row is clicked. Is there also the possibility to limit it to one cell?
You will have to use the relevant cell slot:
<v-data-table
:headers="headersfav"
:items="itemsfav"
#click:row="showSaleslead"
>
<template slot="items.cellName" slot-scope="{item}">
<div #click.stop="onSingleCellClick">{{ item.value }}</div>
</template>
</v-data-table>
There's no event to do that here, but you could achieve that using item slot :
<v-data-table :headers="headersfav" :items="itemsfav">
<template v-slot:item.saleslead="{ item }">
<span #click.stop="showSaleslead">{{ item.saleslead}}</span>
</template>
</v-data-table>
I have added code for v-tooltip but it doesn't display when I hover the combobox , do you see mistakes or in the order of the code, let me know, please.Thanks .
<template>
<div>
<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-combobox
bottom
chips
:items="items"
label="Choose videos"
multiple
/>
</template>
<span>Left tooltip aaaaaaaaaaaaaaaaaaaaaaa</span>
</v-tooltip>
</div>
</template>
When I hover the combobox , nothing happens
You're not applying the activator slot attributes.
Secondly, the combo box creates a parent element that wraps the input that the activator attributes bind to.
This breaks the tooltip, causing it to only trigger when the box input is clicked on.
What you need to do is also wrap your combo box in a div and apply the activator to the div like this:
<template>
<div>
<v-tooltip top>
<template #activator="{on, attrs}">
<div multiple v-on="on">
<v-combobox
bottom
chips
:items="items"
label="Choose videos"
v-bind="attrs"
/>
</div>
</template>
<span>Left tooltip aaaaaaaaaaaaaaaaaaaaaaa</span>
</v-tooltip>
</div>
</template>
This same fix also applies to other Vuetify elements such as v-select which also create their own parent elements.
I am wondering how I can attach links to items within a Vuetify autocomplete. I would like to do this so that it would act as a search bar. As of right now, I can attach links to the v-list-item but the link won't cover the entire width of the container. It appears to just form a link around the text instead of the entire item. I've tried to wrap the entire component but that doesn't seem to work either. I've also tried looking at the docs (https://vuetifyjs.com/en/components/autocompletes/) but I can't seem to find anything on making items links there either. Thanks for any help in advance.
<v-autocomplete
v-model="model"
:items="users"
:loading="isLoading"
:search-input.sync="search"
clearable
hide-details
hide-selected
item-text="username"
item-value="symbol"
placeholder="Search"
flat
solo
dense
>
<template v-slot:item="{ item }">
<v-list>
<v-list-item-group v-model="item">
<v-list-item-content>
<v-list-item link :to="'users/' + item.id">
{{item.username}}
</v-list-item>
</v-list-item-content>
</v-list-item-group>
</v-list>
</template>
</v-autocomplete>
The item slot should be <v-list-item/> only since the wrapping element of those item slots are <v-list/> already by default.
<v-autocomplete
...
>
<template v-slot:item="{ item }">
<v-list-item link :to="'users/' + item.id">{{item.username}}</v-list-item>
</template>
</v-autocomplete>
Here's a demo.