How can I insert an image on one row of my table? I have tried to put v-if in my loop through the columns but I cannot get it right. I am pretty new to quasar so I might confuse things. My idea was to use the v-if for checking if the column name is 'Image' insert an image. And only in that column
My columns are Name, Age and Image
Here is my code:
<template v-slot:body="props">
<div class="row-spacing"></div>
<q-tr
:props="props"
:class="tableFormat(props.row)"
@click="onRowClick($event, props.row)"
>
<q-td
class="td-my"
v-for="col in props.cols"
:key="col.name"
:props="props"
>{{ col.value }}
<div v-if="col.name === 'Image'">
<img class="profile-img" :src="profileimg[0].url" />
</div>
</q-td>
</q-tr>
</template>
Instead of profile image URL, you can use the props variable.
<template v-slot:body="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<span v-if="col.name !='Image'" >
{{ col.value }}</span>
<q-avatar v-if="col.name =='Image'" size="100px" class="shadow-10">
<img :src="props.row.image">
</q-avatar>
</q-td>
</q-tr>
</template>
You can refer the following codepen.