Is there a way to sort a v-data-table by the selection column?
I would like to multisort my v-data-table. First by selection, so the selected ones are always on top and second by name. So far I got this:
<template>
<v-app>
<div id="app">
<v-data-table
:headers="tableHeaders"
:items="selectables"
:show-select="true"
:sort-by="['isSelected', 'name']"
multi-sort
v-model="output"
return-object
>
</v-data-table>
</div>
</v-app>
</template>
<script>
export default {
data() {
return {
output: {},
tableHeaders: [
{
text: "name",
value: "name",
},
],
selectables: [
{
name: "toni",
},
{
name: "hans",
},
{
name: "fritz",
},
],
};
},
};
</script>
Related
Well the scenario is when the selectedFruits is having some element then I need to show "Fruits Selected" and If there is no fruit selected it should display "Select Fruits" in the select. Below is my template and the data I am using. So basically it won't show the fruits selected but display the messages mentioned above in the v-select dropdown. I am new to the vue js, so wondering whether this is possible or not? or is there any alternate way to achieve the same scenario.
<template>
<div>
<v-select
v-model="selectedFruits"
:items="fruits"
label="name"
multiple
/>
</div>
</template>
<script>
export default {
data() {
return {
fruits: [
{ name: 'Apple' },
{ name: 'Mango' },
{ name: 'Banana' },
{ name: 'Berries' },
{ name: 'Muskmelon' }
],
selectedFruits: []
}
}
}
</script>
Well, I found that there is an option called selection which we can use with v-slot through which I am able to achieve the desired result. Below is the changes I made in my code:
<template>
<div>
<v-select
v-model="selectedFruits"
:items="fruits"
label="Select Fruits"
multiple
>
<template v-slot:selection="{ item, index }">
<span v-if="index === 0">{{
item && "Fruits Selected"
}}</span>
</template>
</v-select>
</div>
</template>
<script>
export default {
data() {
return {
fruits: [
{ name: 'Apple' },
{ name: 'Mango' },
{ name: 'Banana' },
{ name: 'Berries' },
{ name: 'Muskmelon' }
],
selectedFruits: []
}
}
}
</script>
I am facing an issue where I need to display one select field two times in the form and while saving the form it will save the data in an array.
What I have done is created a form and added a select form and I want it to display two times (two select form) and it will be able to select different values for two select displays
I have created a sandbox here
Any ideas are much appreciated.
You could create new variable to second value with same options as first select input and save it as array.
<template>
<div>
<b-form-select
class="mb-2 mr-sm-2 mb-sm-0"
:options="optQuality"
v-model="slcQuality"
#input="changeQuality"
>
</b-form-select>
<div>slcQuality: {{ slcQuality }}</div>
<b-form-select
class="mb-2 mr-sm-2 mb-sm-0"
:options="optQuality"
v-model="slcQuality2"
#input="changeQuality"
>
</b-form-select>
<div>slcQuality: {{ slcQuality2 }}</div>
<div>
<button #click="submit">Submit</button>
</div>
<div>submitted Data: {{ JSON.stringify(submittedData) }}</div>
</div>
</template>
<script>
export default {
data() {
return {
optQuality: [
{ value: 1, text: "Original" },
{ value: 2, text: "Kw-1" },
{ value: 3, text: "Kw-2" },
],
slcQuality: null,
slcQuality2: null, // new variable
submittedData: [],
};
},
methods: {
changeQuality() {
console.log("test");
console.log(this.slcQuality);
},
submit() {
const data = [this.slcQuality, this.slcQuality2]; //save data as array
this.submittedData = data;
console.log(data);
},
},
};
</script>
EDIT
To avoid massive code you could use an array of objects as variable or nested array like this, then loop twice in template (nested v-for).
<template>
<div>
<div v-for="(quality, i) in slcQualities" :key="i">
<div v-for="(selection, j) in quality.values" :key="j">
<div>{{ selection.name }}</div>
<b-form-select
class="mb-2 mr-sm-2 mb-sm-0"
:options="quality.options"
v-model="selection.value"
#input="changeQuality"
/>
<div>slcQuality: {{ quality.value }}</div>
</div>
</div>
<div>
<button #click="submit">Submit</button>
</div>
<div>submitted Data: {{ JSON.stringify(submittedData) }}</div>
</div>
</template>
<script>
// array of data
const qualities = [
{
options: [
{ value: 1, text: "Original" },
{ value: 2, text: "Kw-1" },
{ value: 3, text: "Kw-2" },
],
values: [
{ name: "Select 1-1", value: null },
{ name: "Select 1-2", value: null },
],
},
{
options: [
{ value: 1, text: "Original" },
{ value: 2, text: "Kw-3" },
{ value: 3, text: "Kw-4" },
],
values: [
{ name: "Select 2-1", value: null },
{ name: "Select 2-2", value: null },
],
},
];
export default {
data() {
return {
slcQualities: qualities,
submittedData: [],
};
},
methods: {
changeQuality() {
console.log("test");
console.log(this.slcQuality);
},
submit() {
const data = this.slcQualities.map((i) => i.values.map((j) => j.value)); //map the values
this.submittedData = data;
console.log(data);
},
},
};
</script>
Here's the sandbox
I would like to create a Vuetify table with nested data. The problem is that v-slot:item doesn't seem to work with nested data.
This is my code: https://codepen.io/blakex/pen/XWKWjaE
<v-data-table :headers="headers" :items="desserts">
<template v-slot:item.calories="{ item }">
<td>Slot works: {{ item.calories }}</td>
</template>
<template v-slot:item.nested.nestedCalories="{ item }">
<td>Nested slot works: {{ item.nested.nestedCalories }}</td>
</template>
</v-data-table>
data () {
return {
headers: [
{ text: 'Dessert', value: 'name' },
{ text: 'Calories', value: 'calories' },
{ text: 'Nested Calories', value: 'nested.nestedCalories' },
],
desserts: [
{
name: 'Yogurt',
calories: 100,
nested: { nestedCalories: 100 },
},
...
],
}
}
As you can see, the v-slot:item.nested.nestedCalories doesn't work.
Does anyone know what is missing?
This doesn't seem to be mentioned in the DOM Template Parsing Caveats, but HTML tags and attributes are not case-sensitive. In Codepen you're using the DOM as a template, so the v-slot:item.nested.nestedCalories attribute becomes lowercase (v-slot:item.nested.nestedcalories). If you change the value in headers to lowercase you'll see that it works.
To avoid this you should always use string templates with Vue. String templates can be:
.vue files
The template option
<script type="text/x-template"> like the vuetify codepen template uses
Your code written with x-template looks like this:
<div id="app"></div>
<script type="text/x-template" id="app-template">
<v-app>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
>
<template v-slot:item.calories="{ item }">
<td>Slot works: {{ item.calories }}</td>
</template>
<template v-slot:item.nested.nestedCalories="{ item }">
<td>Nested slot works: {{ item.nested.nestedCalories }}</td>
</template>
</v-data-table>
</v-app>
</script>
<script>
const App = {
template: '#app-template',
data: () => ({
headers: [
{ text: 'Dessert', value: 'name' },
{ text: 'Calories', value: 'calories' },
{ text: 'Nested Calories', value: 'nested.nestedCalories' },
],
desserts: [
{
name: 'Yogurt',
calories: 100,
nested: { nestedCalories: 100 },
},
{
name: 'Ice cream',
calories: 200,
nested: { nestedCalories: 200 },
},
{
name: 'Eclair',
calories: 300,
nested: { nestedCalories: 300 },
},
],
})
}
new Vue({
vuetify: new Vuetify(),
render: h => h(App)
}).$mount('#app')
</script>
I can't seem to get default sorting to work. All I can see for the argument custom-sort in the documentation is that it's a "Function used to sort items", but I don't know in what way. I can imagine many. Is it called for an initial sort? It seems to return a list of items, but when I try to create one, I get an error saying this.customSort is not a function.
<template>
<v-data-table
:headers="headers"
:items="reports"
hide-default-footer>
<template v-slot:item.requested="{ item }">
{{ datetimeToDistance(item.requested) }}
</template>
</v-data-table>
</template>
<script>
export default {
name: 'Reports',
data () {
return {
customSort: (items,index,isDesc) => console.log("never called"),
reports: [{name:"a",requested:"2020-01-01T00:00:00Z"}.{name:"b",requested:"2020-02-02T00:00:00"}],
}
},
computed: {
headers () {
return [
{text: "Name", value: "name"},
{text: "Report Type", value: "report_type"},
{text: "Requested", value: "requested", sort: (a,b) => a.localeCompare(b) },
];
},
}
}
</script>
My sorting works if you click on the links. All I really want here is to say: "When the page first loads, sort by 'requested' as though the user clicked that one initially. Then let them change the ordering."
Note: The datetimeToDistance is just a function which calls a library and isn't too important. It's just that the output of that column is not directly in the objects.
Use the sort-by and the sort-desc properties with the .sync option, and set the desired values in data.
<template>
<div>
<v-data-table
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
></v-data-table>
</div>
</template>
<script>
export default {
data () {
return {
sortBy: 'fat',
sortDesc: false,
},
}
</script>
https://vuetifyjs.com/en/components/data-tables/#external-sorting
I usually sort v-datatable in the pagination directive as below:
<template>
<v-data-table :headers="headers" :items="reports" :pagination.sync="pagination" hide-default-footer>
<template v-slot:item.requested="{ item }">
{{ datetimeToDistance(item.requested) }}
</template>
</v-data-table>
</template>
<script>
export default {
name: 'Reports',
data() {
return {
customSort: (items, index, isDesc) => console.log("never called"),
reports: [{ name: "a", requested: "2020-01-01T00:00:00Z" }.{ name: "b", requested: "2020-02-02T00:00:00" }],
pagination: { sortBy: 'requested', descending: true, rowsPerPage: 10 }
}
},
computed: {
headers() {
return [
{ text: "Name", value: "name" },
{ text: "Report Type", value: "report_type" },
{ text: "Requested", value: "requested", sort: (a, b) => a.localeCompare(b) },
];
},
}
}
</script>
I'm pretty new to both vue and vuetify so there might be a few horrible lines in my code, but I'm really struggling with this one and a bit of help would be nice.
I have an array of checkboxes generated with a v-for loop on an "items" array. This array of checkboxes is attached to a model array just like this example from the vuetify documentation.
It looks like the code below.
The problem is : if I change the items array, even when the model array is still empty, all checkboxes end up checked.
Here is my template :
<div id="app">
<v-app>
<v-content>
<v-container>
<div>
<v-list>
<v-list-item
v-for="item in items" :key="item.id"
>
<v-checkbox
v-model="model" :label="item.name"
:value="item"
:value-comparator="comparator"
></v-checkbox>
</v-list-item>
</v-list>
<v-btn #click="updateItems">Change elements</v-btn>
</div>
</v-container>
</v-content>
</v-app>
</div>
and the script
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
model: [],
items: [
{
id: 1,
name: "Item1"
},
{
id: 2,
name: "Item2"
},
{
id: 3,
name: "Item3"
},
{
id: 4,
name: "Item4"
}
]
};
},
methods: {
comparator(a, b) {
return a.id == b.id;
},
updateItems() {
this.items = [
{
id: 1,
name: "Element1"
},
{
id: 2,
name: "Element2"
},
{
id: 3,
name: "Element3"
},
{
id: 4,
name: "Element4"
}
]
}
}
});
And a codepen is way easier to understand
I've been struggling with this issue for a while now, if you have any idea, that would be welcome. Thank you !
EDIT : I had made a mistake in my code. Fixed it. The question is still the same though.
There are few bugs in this code,
from the below checkbox
<v-checkbox
v-model="model" :label="item.name"
:value="item"
:value-comparator="comparator"
></v-checkbox>
:value-comparator is triggers when you click on checkbox, it tries to
match with all other value and returns true only for the selected id
"comparator" function is not available in your methods, replace "valueCompare" method with "comparator"
when you click on change elements, it resets items array but you are not reseting the model
working codepen : https://codepen.io/chansv/pen/rNNyBgQ
Added fixs and final code looks like this
<div id="app">
<v-app>
<v-content>
<v-container>
<div>
<v-list>
<v-list-item
v-for="item in items" :key="item.id"
>
<v-checkbox v-model="model" :label="item.name"
:value="item"
:value-comparator="comparator"
></v-checkbox>
</v-list-item>
</v-list>
<v-btn #click="updateItems">Change elements</v-btn>
</div>
</v-container>
</v-content>
</v-app>
</div>
// Looking for the v1.5 template?
// https://codepen.io/johnjleider/pen/GVoaNe
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
model: [],
items: [
{
id: 1,
name: "Item1"
},
{
id: 2,
name: "Item2"
},
{
id: 3,
name: "Item3"
},
{
id: 4,
name: "Item4"
}
]
};
},
methods: {
comparator(a, b) {
console.log(a, b);
return a.id == b.id;
},
updateItems() {
this.model = [];
this.items = [
{
id: 1,
name: "Element1"
},
{
id: 2,
name: "Element2"
},
{
id: 3,
name: "Element3"
},
{
id: 4,
name: "Element4"
}
]
}
}
});