Answer the question
In order to leave comments, you need to log in
How to add image to vuetify table?
Good day, I have a list that is output to the vuetify table, this list also displays a line with the image address,
tell me how this line can be framed with an img tag with the src attribute so that not just a line is displayed as it is now (sme0acxznhsnzna2sl9nd720gitchafc6tbwpyme7), but a picture ))
<template lang="pug">
v-app.contacts
div.btn-container
CompanyDialog(:nameBtn="nameBtn" :props="company")
v-card
v-card-title
v-spacer
v-text-field(v-model='search', append-icon='mdi-magnify', label='Поиск', single-line='', hide-details='')
v-data-table(:headers='headers', :items='companies', :search='search', @click:row='goInfo'")
</template>
Вот код
export default {
name: "Companies",
data () {
return {
search: '',
dialog: false,
nameBtn: 'Добавить',
company: '',
headers: [
{ text: 'Логотип',
value: 'logo',
width: '200'
},
{
text: 'Название компании',
align: 'left',
sortable: false,
value: 'name'
},
]
}
},
Answer the question
In order to leave comments, you need to log in
The table has a slot for a body where you can manually enter the cells in the same order that you have headers, this is in the dock in the tables section
<v-data-table
:headers="headers"
:items="myitems"
>
<template v-slot:body="{items}">
<tbody>
<tr v-for="(item,index) in items" :key="index">
<td>
<img :src="item.img"/>
</td>
</tr>
</tbody>
</template>
</v-data-table>
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question