Q-table image
-
Hey there, I have a table, with a description <td> and different images. So now how I can add an image to each <td>? When I add via v-for, the pictures are added to the row, not to column:
<q-table :data="data" :columns="columns" row-key="name" hide-bottom> <template v-slot:body-cell-name="props"> <q-td :props="props"> <q-badge :label="props.value"></q-badge> <img v-for="(image, key) in images" :src="image.url" :key="key" /> </q-td> </template> </q-table> ... export default { data() { return { images: [ { url: require("../statics/icons/currency-icons/usa.svg")}, { url: require('../statics/icons/currency-icons/eu.svg')}, { url: require('../statics/icons/currency-icons/kz.svg')}, { url: require('../statics/icons/currency-icons/trk.svg')}, { url: require('../statics/icons/currency-icons/gb.svg')}, { url: require('../statics/icons/currency-icons/ru.svg')}, { url: require('../statics/icons/currency-icons/usa.svg')}, { url: require('../statics/icons/currency-icons/kgz.svg')}, ], } } }
-
In your example, you are putting all the images in one cell. Also, with the slot “body-cell-name”, “name” should be the name of a column.
It’s also sort of hard to tell what you want to do without seeing the full set of data/ full component. Best thing to do is create a codepen as an example we can both work off of.
Scott
-
Hello Scott! Thank you for your reply. Sorry about that, here is codepen https://codepen.io/TavitaMenashe/pen/qBbmZBB
-
The pen doesn’t work. Get at least the table showing please.
Scott
-
-
-
@s-molinari Yes, it is working! Thank you so much!