Q-table image

Kate

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')},
     ],
   }
 }
}

s.molinari

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

Kate

Hello Scott! Thank you for your reply. Sorry about that, here is codepen https://codepen.io/TavitaMenashe/pen/qBbmZBB

s.molinari

The pen doesn’t work. Get at least the table showing please.

Scott

Kate

@s-molinari
https://codepen.io/TavitaMenashe/pen/MWKmyQd

s.molinari

Ok. Is this what you are looking for?

https://codepen.io/smolinari/pen/wvMdWvR?editors=1010

Scott

Kate

@s-molinari Yes, it is working! Thank you so much!