Buefy table how to render html in the td

Viewed 98

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);
}
1 Answers

The solution is to use slot template with v-html like

<b-table-column
    label="Assigned visuals"
    field="assignedVisuals"
    v-slot="{ row }"
>
    <template v-html="getAssignedVisuals(row.key)"></template>
</b-table-column>
Related