I have Nuxt project with Buefy. There is b-table element which looks like:
<b-table :data="formats">
<b-table-column
v-slot="{ row }"
label="Aspect ratio"
field="value"
>{{ row.value }}</b-table-column
>
<b-table-column
v-slot="{ row }"
label="Assigned visuals"
field="assignedVisuals"
>{{ getAssignedVisuals(row.key) }}</b-table-column
>
<b-table-column
v-slot="{ row }"
label="Screens count"
field="devicesCount"
>{{ row.devicesCount }}</b-table-column
>
</b-table>
The second column calls getAssignedVisuals(row.key) which should return html string in some cases. But I am not able to render that html cause Buefy escape the string and it shows the raw html string. Can somebody tell me please how can I do it?
Here is the function:
getAssignedVisuals(ratio) {
ratio = ratio.split('x');
// This is the problem
if( !ratio.length || ratio.length < 2 ) return '<span class="is-danger">Missing visual</span>';
ratio = ratio[0] / ratio[1];
return this.files.reduce((reduced, item) => {
const itemRatio = item.width / item.height;
if( itemRatio === ratio || (itemRatio < ratio + 0.01 && itemRatio > ratio -0.01) ) ++reduced;
return reduced;
}, 0);
}