<v-data-table
:headers="headers"
:items="items"
:search="search"
:loading="loading"
loading-text="Loading... Please wait"
hide-default-footer
class="elevation-1"
>
<template slot="items">
<td>
<img :src="items.imgsrc" style="width: 50px; height: 50px" />
</td>
</template>
</v-data-table>
Between v-data-table tags
I think I should put in an image with slots, etc., but I don't know at all. I'm asking because I can't find the exact code no matter how hard I look.
The height in the 'v-img' tag seems to work, but the image doesn't come out.
<script>
export default {
data () {
return {
search: '',
headers: [
{
text: 'img',
align: 'start,
filterable: false,
value: 'imgsrc',
type: 'Image',
},
{
text: 'MyName',
align: 'start,
filterable: false,
value: 'name',
},
],
items: [
{
name: 'test1',
imgsrc: '#/assets/img/avatar.png',
},
{
name: 'test2',
imgsrc: '#/assets/img/avatar2.png',
},
],
}
},
}
</script>
Help me
The slot needs to be used like below
<v-data-table
:headers="headers"
:items="items"
:search="search"
:loading="loading"
loading-text="Loading... Please wait"
hide-default-footer
class="elevation-1"
>
<template v-slot:item.imgsrc="{ item }">
<td>
<img :src="require(item.imgsrc)" style="width: 50px; height: 50px">
</td>
</template>
</v-data-table>
Related
In my vue component I am using vuetify table. It works properly, but I need to make that click on items in column "Category name" redirect to vue view which shows details of clicked item (I need to forward item id to view which shows details of item). I don`t know how to do that?
In method 'editItem' I also need to redirect to other page, with forwarded id, I also don`t know how to do that?
I tried to make "Category name" items as hyperlink, but it does not work and it is without id:
<template v-slot:item.categoryName="{ item }">
<a :href="this.$router.push({name: 'EditCategory'})">{{item.categoryName}}</a>
</template>
This is code of my vue component 'CategoryTable':
<template>
<v-data-table
:headers="headers"
:items="categories"
sort-by="categoryName"
class="elevation-1"
:footer-props="{
'items-per-page-options': [1, 2, 3, 4, 5]
}"
:items-per-page="2"
>
<template v-slot:top>
<v-toolbar
flat
>
<v-toolbar-title>Categories Table</v-toolbar-title>
<v-divider
class="mx-4"
inset
vertical
></v-divider>
<v-spacer></v-spacer>
<button #click="$router.push({name: 'AddCategory'})">Add category</button>
</v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
<v-icon
small
class="mr-2"
#click="editItem(item)"
>
mdi-pencil
</v-icon>
<v-icon
small
#click="deleteItem(item)"
>
mdi-delete
</v-icon>
</template>
</v-data-table>
</template>
<script>
export default {
name: "CategoriesTable",
data: () => ({
headers: [
{
text: 'Category name',
align: 'start',
value: 'categoryName',
},
{ text: 'Description', value: 'description' },
{ text: 'Actions', value: 'actions', sortable: false },
],
categories: [],
editedIndex: -1,
defaultItem: {
id: 0,
categoryName: '',
description: '',
},
}),
created () {
this.initialize()
},
methods: {
initialize () {
this.$axios.get('/api/categories').then((response) => {
console.log(response.data)
this.categories = response.data;
});
},
editItem (item) {
this.$router.push({name: 'CategoryEdit'});
item.id
},
deleteItem (item) {
this.$axios.delete('/api/categories/' + item.id).then((response) => {
console.log(response)
});
},
},
}
</script>
If you want the user to be redirected after clicking on a particular category name, you will pass the corresponding route or id like i did below:
<v-data-table
:headers="headers"
:items="categories"
sort-by="categoryName"
class="elevation-1"
:footer-props="{
'items-per-page-options': [1, 2, 3, 4, 5],
}"
:items-per-page="2"
>
<template v-slot:item.categoryName="{ item }">
<a
#click="$router.push(`/details/${item.itemID}`)"
>
{{item.categoryName}}
</a>
</template>
</v-data-table>
the item id is passed after clicking on the category
I'm trying to add (+) icon to the one of the header columns in v-datatable.
The code below does not add any icon. Actually, creating template slot for header does not have any effect on datatable.
What I try,
<template>
<v-data-table
item-key="name"
:items="complainantInfos"
:headers="headers"
sort-by="Id"
class="elevation-1">
<template v-slot:top>
<v-toolbar flat color="white">
<v-toolbar-title>Inspection</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
</template>
<template slot="headers" slot-scope="props">
<tr>
<th
v-for="header in props.headers"
:key="header.text">
<v-icon small >plus-circle-outline</v-icon>
{{ header.text }}
</th>
</tr>
</template>
</v-data-table>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data(){
return{
complainantInfos:[
{
...
}
],
headers: [
{ text: 'NameSurname', value: 'name', align: 'left' ,width: "25%" },
{ text: 'ID', value: 'PersonelIdNumber' },
{ text: 'Phone-1', value: 'Cellular1' },
{ text: 'Phone-2', value: 'Cellular2' },
{ text: 'Work Phone', value: 'WorkPhone' },
{ text: 'InterPhone', value: 'Interphone' },
{ text: 'Email', value: 'Email' },
//{ text: '+', value: 'action', sortable: false, align: 'right'}
],
I have edited the code according to the comments. The problem solved.
...
</v-card>
</v-form>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:header.Actions="{ header }">
<v-icon small>plus-circle-outline</v-icon>{{ header.text }}
</template>
...
Since you only wish to add the icon to one specific column, I would suggest header.columnName.
Your slot would look like this:
<template v-slot:header.name="{ header }">
<v-icon small>plus-circle-outline</v-icon>{{ header.text }}
</template>
If the column name is "Cellular1", the code will be <template v-slot:header.Cellular1="{ header }">.
Please make sure you have the icon set included. Otherwise, no HTML will be rendered for v-icon. You can test it with default mdi icons, for example mdi-minus.
<v-data-table
:headers="headers"
:items="items"
:search="search"
hide-default-footer
class="elevation-1"
>
<template #[`item.employee_avatar`]="{ item }">
<v-img
:src="require('#/assets/img/img2.jpg')"
:alt="item.name"
style="width: 100px; height: 100px"
/>
</template>
</v-data-table>
The image with a fixed path is received, but I want to express the image with the image path of each object. I want to automatically follow the imgsrc path value of items.
export default {
data() {
return {
search: '',
loading: true,
headers: [
{
text: 'Avatar',
value: 'employee_avatar',
divider: true,
align: 'center',
sortable: false,
width: '100px',
},
{
text: 'myname',
align: 'center',
sortable: false,
value: 'name',
},
],
items: [
{
name: 'myname',
imgsrc: "#/assets/avatar.png",
},
The code below is the code I tried.
<template #[`item.employee_avatar`]="{ item }">
<v-img
:src="require(item.imgsrc)"
:alt="item.name"
style="width: 100px; height: 100px"
/>
</template>
There will be an error even if I fill out the above.
What's wrong with it? Help me...
You can use v-slot instead of #[item.employee_avatar]:
<template v-slot:item.employee_avatar="{ item }">
<v-img
:src="require(item.imgsrc)"
:alt="item.name"
style="width: 100px; height: 100px"
/>
</template>
I'm setting up a list that fetches from a database and displays a list of orders. onclick of the button, I would like to show the stars-rating div only in the row it was clicked on. How do I make a vue button trigger the appearance of a div only in the row that it is in.
I've tried using v-on:click= function to call another function in js but didn't seem to work. Here both templates are contained in
<div id="wrapper">
<v-toolbar flat color="white">
<v-toolbar-title style="font-family: 'Raleway', sans-serif;">Order
History</v-toolbar-title>
<v-spacer></v-spacer>
<d style="margin-right:20px;color:#a7a7a7;font-family: 'Raleway',
sans-serif;">click on an order for more information</d>
</v-toolbar>
<v-data-table
:headers="headers"
:items="orders"
:expand="expand"
item-key="number"
>
<template v-slot:items="props">
<tr #click="props.expanded = !props.expanded">
<!--trigger using this button--> <td class="text-xs-left" style='font-
weight:400;'><v-btn v-on:click="greet"
class="dark">{{ props.item.review }}</v-btn>
</td>
</tr>
</template>
<template v-slot:expand="props" style="font-
weight:500">
<v-data-table
:items="[props.item]"
:expand="expand"
item-key="name"
hide-actions
>
<template v-slot:headers="props">
</template>
<template v-slot:items="props">
<td width="15%" class="text-xs-left"
style='font-weight:300;'>
<!--trigger this div --> <div class="star-rating"></div>
</td>
</template>
</v-data-table>
</template>
</v-data-table>
</div>
//JS
var v = new Vue({
el: '#app',
methods: {
greet: function () {
$(".stars-rating").hide();
}
},
data() {
return {
expand: true,
headers: [
{
text: 'Order Number',
align: 'left',
sortable: false,
value: 'number',
width: '10%' },
{ text: 'Name/Message', value: 'name',
align: 'left',
width: '15%' },
{ text: 'Date/Start', value: 'date',
align: 'left',
width: '10%' },
{ text: 'Time/End', value: 'time',
align: 'left',
width: '10%' },
{ text: 'Provider/Receipts', value: 'provider',
align: 'left',
width: '10%' },
{ text: 'Amount/Labor', value: 'amount',
align: 'left',
width: '15%' },
{ text: 'Status/Tracking', value: 'status',
align: 'left',
width: '15%' },
{ text: 'Confirmation/Review', value: 'review',
align: 'left',
width: '15%' }],
orders: [],
};
} });
have you tried with
<div class="star-rating" v-if="props.expanded"></div>
First of all, you should remove the #click from your <tr #click="props.expanded = !props.expanded"> element.
In your greet function, you have to change the expand flag, something like:
greet: function () {
this.expand = false
}
As you are already biding the expand state with the v-data-table expand prop, it should work
<v-data-table
:headers="headers"
:items="orders"
:expand="expand"
item-key="number"
>
I am using Vue + Vuetify and I am trying to add image in the first column.
Table Template Code
<v-data-table
:headers="headers"
:items="desserts"
:search="search"
light
>
<template slot="items" slot-scope="props">
<td><img :src="props.item.name" style="width: 50px; height: 50px"></td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
<v-alert slot="no-results" :value="true" dir="rtl" color="error" icon="warning">
{{ PRODUCTS_TABLE_TEXT.NO_RESULT }} "{{ search }}"
</v-alert>
</v-data-table>
Table Script Code
data () {
return {
//TEXT
PRODUCTS_TABLE_TEXT: products_table_text,
//TABLE DATA
search: '',
headers: [
{
text: products_table_text.columns.IMAGE,
align: 'center',
sortable: false,
value: 'image'
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' }
],
desserts: [
{
value: false,
name: '1.jpg',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%'
},
]
}
}
What I have tried to do
I have tried to add the HTML image code in the name variable like this:
name: '<img src="./../../assets/products-images/1.jpg" style="width: 50px; height: 50px">'
But it just printed the HTML as a text and did not render it.
I am also stacked for som minute but this is the easy way to use an image in vuetify data table
Table Template Code
<template>
<v-layout row wrap>
<v-flex xs12>
<v-data-table :headers="headers" :items="carts" class="elevation-0">
<template v-slot:item.image="{ item }">
<div class="p-2">
<v-img :src="item.image" :alt="item.name" height="100px"></v-img>
</div>
</template>
</v-data-table>
</v-flex>
</v-layout>
<template/>
Table Script Code
<script>
import { mapGetters } from "vuex";
export default {
data() {
return {
user: null,
isAvalibel: false,
headers: [
{ text: "Image", value: "image", sortable: false },
{ text: "Product Name", value: "name", sortable: false },
]
};
computed: {
...mapGetters(["carts"])
},
During template compilation, the compiler can transform certain attributes, such as src URLs, into require calls, so that the target asset can be handled by webpack. For example, <img src="./foo.png"> will attempt to locate the file ./foo.png on your file system and include it as a dependency of your bundle.
so, for dynamic attribute src,
<td>
<img :src="require('./assets/products-images/' +props.item.name)">
</td>
Actually there are many ways you can use to insert image inside your Vue app/template:
1) (This is what you need for your code) Using require function actually this is going to be handled by the webpack and map the image to it's resource.
<img :src="require('./assets/products-images/' + props.item.name)">
please follow the below github discussion for more explanation:
https://github.com/vuejs-templates/webpack/issues/126
2) Another way read the image as base64 from the server and handle that inside your Vue app:
<img v-bind:src="'data:image/jpeg;base64,'+imageBytes" />
if you want to use your server images with axios and display them in the rows, this works too.
<template v-slot:item.image="{ item }">
<img v-bind:src="`/${item.image}`" style="width: 50px; height:50px">
</v-img>
</template>