Buefy表如何在td中渲染html答案

【问题标题】：Buefy table how to render html in the tdBuefy表如何在td中渲染html
【发布时间】：2022-01-09 18:20:11
【问题描述】：

我有 Buefy 的 Nuxt 项目。有一个 b-table 元素，看起来像：

<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>

第二列调用 getAssignedVisuals(row.key) 在某些情况下应该返回 html 字符串。但我无法呈现该 html 导致 Buefy 转义字符串并显示原始 html 字符串。谁能告诉我该怎么做？

函数如下：

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

【问题讨论】：

这很奇怪，但您可以为b-table-column 使用 v-html 属性，例如：:v-html="getAssignedVisuals(row.key)"
:v-html="getAssignedVisuals(row.key)" 抛出错误无法读取未定义的属性“键”。
没有v-html，getAssignedVisuals() 接收key 值？
是的，没有v-html，key 值可用。

标签： html vuejs2 buefy

【解决方案1】：

解决方法是使用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>

【讨论】：