I use NuxtJs and Vuetify for one project. I need to create a treeview so I would like to do it with v-treeview.
I have a problem with the node name.
Here are my data:
items: [
{
id: 1,
data: {
name: 'Application :',
id: '1',
},
children: [
{},
],
},
}
Here the frontend
<v-treeview :items="items"></v-treeview>
So I would like to have data.name in text but I can't get it. Do you have an idea?
Thanks
Add the item-text property to your v-treeview tag to specify what the value to be displayed is
:item-text="data.name"
you can use the label slot inside your v-treeview like :
<v-treeview :items="items">
<template v-slot:label="{item}">
<div class="v-treeview-node__label">{{item.data.name}}</div>
</template>
</v-treeview>
Related
Good Afternoon.
I'm trying to build a stylized table with "v-data-table", without being used to it. Mainly put style into second or third cell (table, tr, td). I don't find the solution for my problem. Help me, please.
thanks.
You can use the item-class attributes to style every row
Property on supplied items that contains item’s row class or function that takes an item as an argument and returns the class of corresponding row
It works as the following :
It takes a function as argument that return a class depending on the row.
If you want to return a specific class depending on the item use it like this :
<template>
<v-datad-table :item="items" :item-class="getMyClass"></v-data-table>
</template>
<script>
methods: {
getMyClass(item){
// here define your logic
if (item.value === 1) return "myFirstClass"
else return "mySecondClass"
}
}
</script>
If you want to always give the same class you can just return the class you want to give (note that this is the same as stylized the td of the table using css)
<template>
<v-data-table :items="items" :item-class="() => 'myClass'"></v-data-table>
</template>
In your case, you can add an index to your data using a computed property and added a class based on the index
computed: {
myItemsWithIndex(){
retunr this.items.map((x, index) => {...x, index: index})
}
}
methods: {
getMyClass(item){
if(item.index === 2 || item.index === 3) return "myClass"
}
}
Working example
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: () => {
return {
items: [
{name: "foo"},
{name: "bar"},
{name: "baz"},
{name: "qux"},
{name: "quux"},
{name: "corge"},
{name: "grault"},
],
headers: [{ text: 'Name', value: 'name'}],
}
},
computed: {
itemsWithIndex(){
return this.items.map((item, index) => ({ ...item, index:index }))
}
},
methods: {
getMyClass(item){
if(item.index === 2 || item.index === 3){
return "myClass"
} else return
}
}
})
.myClass {
background: red
}
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.4/dist/vuetify.min.css" />
<div id="app" data-app>
<v-data-table :items="itemsWithIndex" :headers="headers" :item-class="getMyClass"></v-data-table>
</div>
I'd bet that what you're trying to achieve can be done using named slots
See this example from the docs. Basically, the template tag you see in the example will become whatever node is 'above it' (which it really isn't because it takes its place, but you get the point). For instance, in the case of data-tables, <template #item="{ item }">... represents every <td> of your table. Then you can use the destructured item and apply some logic to it to still of modify you table as you will.
Don't forget to upvote/validate the answer if it helped your to solve your issue, comment if you need more details and welcome to Stack!
There are also the possibility to use cellClass, which is part of the headers.
The image is from https://vuetifyjs.com/en/api/v-data-table/#props
As computed property i have:
headers() {
return [
{ text: this.$t('Name'), align: 'left', sortable: true, value: 'name', cellClass:'select' },
{ text: 'CVR', sortable: false, value: 'cvrno' },
{ text: this.$t('Updated At'), sortable: false, value: 'updatedAt' }
]
},
and by v-data-table tag looks like:
<v-data-table
v-model="selected"
:headers="headers"
:items="customerFiltered"
:loading="loadingCustomers"
:items-per-page="-1"
selected-key="id"
show-select
hide-default-footer
fixed-header
>
I'm trying to have different text colors for my breadcrumbs based on a property but I can't figure out how to apply those colors anywhere. Can't add a color or class in the items either.
breadcrumbItems() {
return [
{
text: this.$t("receiving.breadcrumbs.step1"),
disabled: this.item.Status !== "STEP1"
},
{
text: this.$t("receiving.breadcrumbs.step2"),
disabled: this.item.Status !== "STEP2"
},
{
text: this.$t("receiving.breadcrumbs.step3"),
disabled: this.item.Status !== "STEP3"
}
];
}
<v-breadcrumbs :items="breadcrumbItems" class="breadStyle">
<template v-slot:divider>
<v-icon size="25">mdi-forward</v-icon>
</template>
</v-breadcrumbs>
Looking at the API for v-breadcrumbs: https://vuetifyjs.com/en/api/v-breadcrumbs-item/ it doesn't provide a property "color" or something similar, but there is a slot, so you can pass any kind of components in it.
You can create a <span> and customize its color and its style depending on the items:
<template>
<v-breadcrumbs :items="items">
<template v-slot:divider>
<v-icon size="25">mdi-forward</v-icon>
</template>
<template v-slot:item="{ item }">
<v-breadcrumbs-item :disabled="item.disabled">
<span :style="`color: ${item.color}`">
{{ item.text.toUpperCase() }}
</span>
</v-breadcrumbs-item>
</template>
</v-breadcrumbs>
</template>
<script>
export default {
data: () => ({
items: [
{
text: "Dashboard",
disabled: false,
color: "green",
},
{
text: "Link 1",
disabled: false,
color: "blue",
},
{
text: "Link 2",
disabled: true,
color: "red",
},
],
}),
};
</script>
I've found that the deep selector (https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors) often helps with styling Vuetify components. I added this to my components scoped CSS and the colours work just fine for links:
.v-breadcrumbs >>> a {
color: purple;
}
I found the relevant tag by looking through the Elements-tab under Inspect (in Chrome).
I don't know if this is the best solution for your specific situation, but figured I'd add this for anyone with a simpler use case.
I am using vuetify's to display dropdowns.
The options come from my components data.
What I would like to do now is to deactivate only some of the items in the v-select. What items are deactivated and which are activated will later on depend on the user input.
I can only find the option to deactivate the whole v-select like by adding disabled="true" to the v-select.
My code looks like this right now:
<v-row
v-for="(part, index) in xy"
:key="index">
<v-col md="3" sm="3">
<v-card ripple >
<v-img
src="src/assets/test.PNG"
></v-img>
</v-card>
</v-col>
<v-col md="8" sm="3">
<v-select
v- model="dropdownValues[index]"
:items="part"
hide-details
label="Select value"
single-line
#change="changeInput(index, dropdownValues[index])"
#click:append-outer="resetInput(index)"
>
<template slot="append-outer">
<v-icon #click="resetInput(index)">
mdi-close
</v-icon>
</template>
<template
slot="{item, index}">
{{ index }}
</template>
</v-select>
</v-col>
</v-row>
I thought that I could do the items via this slot possibility but now I am unsure where and how to add the functionality of changing which items are deactive and which not.
Thanks in advance!
<v-select> items array with objects can have an additional property disabled that currently is not documented.
data: () => ({
items: [
{ text: 'Empty', value: '' },
{ text: 'Test1', value: 'test1', disabled: true },
{ text: 'Test2', value: 'test2' },
{ text: 'Test3', value: 'test3' },
{ text: 'Test4', value: 'test4' },
]
}),
You can return the filtered array of objects as computed property you can see some demo example in here:
https://codepen.io/edenkindil/pen/RwrZMXy
BTW you can change this property key like to the text and value with the item-disabled just like you would use the item-text or item-value
Update: Vuetify docs is now updated
You can see now all the available items in array of objects:
{
text: string | number | object
value: string | number | object
disabled: boolean
divider: boolean
header: string
}
I am using v-for to display collection of images using Vuetify v-img. We only store the image's Id which is then dynamically inserted into the src attribute of v-img. But dynamically inserting src value is not working. image.title is displayed but nothing is displayed for v-img. I have tried few other answers on SO but none worked. Does anybody know what is the correct way to do this?
<v-card max-width="400" v-for="image in images" :key="image.sourceId">
{{image.title}}
<v-img
src="'https://img.imagestore.com/image/' + image.sourceId + '.jpg'">
</v-img>
</v-card>
export default {
data: () => ({
images: [
{
id: "2",
sourceId: "bMwG1R3sXnE",
title: "Sunrise"
},
{
id: "3",
sourceId: "pqrwG1R3sXnE",
title: "Amazon Forest"
}
]
})
Well, binding the src attribute made it work so instead of src use :src
<v-img
:src="'https://img.imagestore.com/image/' + image.sourceId + '.jpg'">
</v-img>
or
<v-img
:src="`https://img.imagestore.com/image/${image.sourceId}.jpg`">
</v-img>
How, if at all possible, to apply a filter to a Vuetify v-data-table, in conjunction with the 'regular' search property?
Following the Vuetify example (https://vuetifyjs.com/en/components/data-tables)
, consider a Vuetify data-table with two columns:
Dessert
Category
I want to control the table with a search box, linked to the "Dessert" column:
<v-data-table
:headers="headers"
:items="desserts"
:search="search"
></v-data-table>
and:
headers: [
{ text: 'Dessert (100g serving)', value: 'name' },
{ text: 'Category', value: 'category' },
],
But I want to control a filter on the Category column with a group of checkboxes (exact match). There is such a thing as a "custom-filter", but the documentation is not very detailed on that.
This looks to be the same question (unanswered): How to add individual filters for data-table in vuetify?
Turns out it's actually quite simple! The filters are defined in the headers property.
No changes required to the html element:
<v-data-table
:headers="headers"
:items="desserts"
:search="search"
></v-data-table>
The headers are moved to the computed-section and defined like this:
computed: {
headers() {
return [ { text: 'Dessert (100g serving)', value:'name' }
, { text: 'Category', value: 'category', filter: value => {
return this.array_of_matches.indexOf(value) !== -1
},
}
]
}
Where array_of_matches is a variable containing a list of search items. You may optionally want to add case conversion stuff like this: value.toString().toLocaleUpperCase()
The 'regular' search won't match anything on a header that has such a filter defined.