I am using v-data-table and I want get row Id when a row selected.
this is my code
<v-data-table
item-key="id"
v-model="selected"
show-select
:headers="headers"
:items="users">
</v-data-table>
Something that give me when I select a row:
[
{id:2 , name:"kevin" , age : 25 }
]
Something I need it to be:
[2]
Upon using the v-data-table you can use the v-model in the table.
And then you can watch for your selected array and get the field you want from it.
<v-data-table
v-model="selected"
:headers="headers"
:items="desserts"
:single-select="singleSelect"
item-key="name"
show-select
class="elevation-1"
>
As you see the selected is an array I defined in the data section.
data () {
return {
singleSelect: false,
selected: []
}
Related
I'd like to update the select value by clicking the prepended item in a Vuetify select. But the model doesn't update the item-text in the select input.
<v-select
:items="loadedTasks"
v-model="selectedTask"
item-text="text"
item-value="value"
return-object
:menu-props="{closeOnContentClick: true}"
>
<template v-slot:prepend-item>
<v-list-item
#click="selectedTask = {text:'none', value: 'none'}"
>
Text
</v-list-item>
</template>
If you are trying to add some "default" item to the select, the prepend-slot is no way to go as it cannot be "selected". It's better to just add your "default" item directly into the loadedTasks array
For example using computed:
computed: {
tasksToSelect() {
return [{text:'none', value: 'none'}, ...this.loadedTasks]
}
}
...and use it like <v-select :items="tasksToSelect" />
This question already has an answer here:
How to clear selected row in v-data-table, Vuetify
(1 answer)
Closed 2 years ago.
I have a vue app where Im using v-data table with show-select option. I want to clear only selected data using "cancel" button and Im looking for solution how to do it correctly. Already I can clear all data from table onclick.
Example on picture:
I want to clear only selected row(Ice cream sandwich)
Here is my code:
Table:
<v-data-table
v-model="selected"
:headers="headers"
:items="desserts"
:single-select="singleSelect"
item-key="name"
show-select
class="elevation-1"
>
<template v-slot:top>
<v-switch
v-model="singleSelect"
label="Single select"
class="pa-3"
></v-switch>
</template>
</v-data-table>
"cancel" button
<v-btn class="ma-2" color="primary" #click="cancel"> Cancel </v-btn>
script
cancel() {
this.desserts = [];
},
Use any unique property (in this example - an id) to filter the row out of your items array.
cancel(){
this.desserts = this.desserts.filter((e)=> {
return e.id !== this.selected.id;
});
}
I have a parent component and a child component (which has a vuetify table).
I am trying to make certain columns display chips from the parent component. I've run into a weird problem which I'm not sure what is the matter.
Parent Page: (Parent page is more complicated than this which is why I have taken out the table into another component so I can reuse it in combination with other stuff elsewhere)
<simple-table
v-if="!loading"
:tableData="tableData"
:loading="loading"
:headers="headers"
#search=""
:selected.sync="selected"
itemKey="groupName"
>
<template v-slot:userDatasetAccess="">
<v-chip color="red" dark>test</v-chip>
</template>
</simple-table>
When the code is like above, I can see test in a chip appearing in the UserDatasetAccessColumn
Child Page
<v-data-table
:headers="headers"
:items="tableData"
:search="search"
:loading="loading"
loading-text="Loading... Please Wait"
show-select
:item-key="itemKey"
v-model="selected"
#input="$emit('update:selected',selected)"
>
<template v-slot:[getSlot(slot)]="{ item }" v-for="(_, slot) in $slots">
<slot :item="item" :name="slot"></slot>
</template>
</v-data-table>
methods: {
getSlot(slot) {
return `item.${slot}`
}
},
However, when I change the parent to:
<template v-slot:userDatasetAccess="item">
<v-chip color="red" dark>{{item.userDatasetAccess}}</v-chip>
</template>
It no longer works.
I've console logged this.$slots and this.$scopedslots and they become empty.
So my question is: Why is it that when I do v-slot:userDatasetAccess="" vs v-slot:userDatasetAccess="item", it no longer appears as part of $slots and $scopedslots.
Is there a better way to access the columns via slots from the parent?
I'm trying to configure a drop down filter for each column in my vuetify data table. It seems the vuetify autocomplete component has the functionality I want but I'm not sure how to get the values from the autocomplete component to filter the data table. Here's what I have:
<template>
<v-card>
<v-card-title>
{{gridTitle}}
<v-spacer></v-spacer>
</v-card-title>
<v-data-table
v-model="selected"
:headers="headers"
:items="dataSource"
class="elevation-1"
:search="search"
:loading="isloading"
item-key="id"
show-select
multi-sort
dense
>
<template v-slot:header.id="{ header }" >
<v-autocomplete
v-model="search"
:items="dataSource"
item-text="id"
:label="header.value"
v-bind="selected"
dense
multiple
chips
small-chips
filled
>
</v-autocomplete>
</template>
<v-progress-linear
slot="progress"
color="blue"
indeterminate
></v-progress-linear>
<v-alert
slot="no-results"
:value="true"
color="error"
icon="warning"
>Your search for "{{ search }}" found no results.</v-alert>
</v-data-table>
</v-card>
</template>
<script>
export default {
name: "ConfirmationsGrid",
data() {
return {
isloading: true,
search: "",
selected: [],
};
},
props: {
dataSource: {
type: Array[Object],
default: new Array(),
},
headers: Array[String],
gridTitle: String,
},
mounted() {
this.isloading = false;
},
methods: {
onSelectMethod: function (value) {
this.$emit("select_method", value);
},
},
};
</script>
At the moment I'm testing with the one header. slot but I plan on extending to all headers. This renders the autocomplete as the column header and also shows the correct values in the drop down but selecting them doesn't filter the table. I only get the following error:
[Vue warn]: Invalid prop: type check failed for prop "search". Expected String with value "2579034", got Array
Any ideas on how I can convert the autocomplete data into a string?
You are adding the prop multiple to the v-autocomplete tag with v-model search, so it returns an Array, i.e.:
["search option1", "searchOption2"]
But the v-autocomplete tag with v-model selected is using the search prop as String, so that's te reason of the error.
The default behavior of the search prop for v-autocomplete tag is to match the string passed to it with each value in its options.
To test it, remove the multiple prop in the search v-autocomplete tag, and you can see that it works.
Now, in order to work with multiple word search, you can have a computed property as items for the first v-autocomplete:
...
computed: {
itemsForSelected() {
if (this.search.length) {
return this.dataSource.filter(item => this.search.includes(item))
}
return this.dataSource
}
}
...
<template>
<v-card>
<v-card-title>
{{gridTitle}}
<v-spacer></v-spacer>
</v-card-title>
<v-data-table
v-model="selected"
:headers="headers"
:items="itemsForSelected"
class="elevation-1"
:loading="isloading"
item-key="id"
show-select
multi-sort
dense
>
<template v-slot:header.id="{ header }" >
<v-autocomplete
v-model="search"
:items="dataSource"
item-text="id"
:label="header.value"
v-bind="selected"
dense
multiple
chips
small-chips
filled
>
</v-autocomplete>
</template>
<v-progress-linear
slot="progress"
color="blue"
indeterminate
></v-progress-linear>
<v-alert
slot="no-results"
:value="true"
color="error"
icon="warning"
>Your search for "{{ search }}" found no results.</v-alert>
</v-data-table>
</v-card>
</template>
Now you can remove the search prop from the first v-autocomplete, this solution is not useful if you want to have the search by substrings ("hol" matching "alcohol"), it just filter the items from the source that are not selected in the search filter. A better solution could be includes a regex to match more options.
i have a problem on a vue project of mine.
i have a vuetify datatable that receives data from a .net core backend with mongo.
it works just fine and every row have a edit and delete buttons. but in this case i need to limit edit and delete buttons to show only on the first row of the datatable.
i've tried a lot of solutions from the internet but none of them worked for me so far.
here's the code for the datatable and the buttons, respectively:
<v-data-table
:headers="headers"
:items="pacientes"
:search="search"
:page.sync="page"
:items-per-page="itemsPerPage"
hide-default-footer
sort-by="status"
class="elevation-1"
#page-count="pageCount = $event"
>
<template
v-slot:item.edit="{ item }" >
<v-btn
color="blue"
tile
x-large
icon
#click="aprovar(item.nomePaciente, item.idEspera, item.matricula)"
>
<v-icon>mdi-pencil-circle</v-icon>
</v-btn>
</template>
<template
v-slot:item.delete="{ item }"
>
<v-btn
color="red"
x-large
tile
icon
#click="abrirModalDeletar(item.nomePaciente, item.idEspera)">
<v-icon>mdi-delete-circle</v-icon>
</v-btn>
</template>
Any help would be appreciated, thanks!
You could introduce a boolean property to your items in the array, let's call it isFirst Then you could listen to the event of current-items in the data table, which returns the current items in view. And based on that, show the buttons for the first row. So I suggest the following:
<v-data-table #current-items="setFirst" ...... >
And the function:
methods: {
setFirst: function(currItems) {
// first check that actually exists values
if (currItems.length) {
// toggle all to false
currItems.forEach(x => x.isFirst = false)
// just set first to true
currItems[0].isFirst = true;
}
}
},
and then set an v-if to the buttons:
<v-btn v-if="item.isFirst" ....>
CODEPEN
If your object has an ID and you know what that ID is, you can set a v-if statement for your edit and delete buttons to only render when the ID is equal to that value. Something like this:
<template
v-slot:item.edit="{ item }" >
<v-btn
color="blue"
tile
v-if="item.id===1"
x-large
icon
#click="aprovar(item.nomePaciente, item.idEspera, item.matricula)"
>
<v-icon>mdi-pencil-circle</v-icon>
</v-btn>
</template>
<template
v-slot:item.delete="{ item }"
>
<v-btn
color="red"
x-large
tile
v-if="item.id===1"
icon
#click="abrirModalDeletar(item.nomePaciente, item.idEspera)">
<v-icon>mdi-delete-circle</v-icon>
</v-btn>
</template>
If your item doesn't have an ID, when you fetch your data, you can programmatically set a property on the first item and then use the v-if statement on that property.
Something like:
fetchData().then(items => {
if (items.length >= 1) {
items[0].showEditDelete = true
}
})
Then your v-if statement will look like v-if=item.showEditDelete.