Tabla Buefy: cómo renderizar HTML en el td
Tengo un proyecto Nuxt con Buefy. Hay un elemento b-table que se ve así:
<b-table :data="formats">
<b-table-column v-slot="{ row }" label="Relación de aspecto" field="value">{{ row.value }}</b-table-column>
<b-table-column v-slot="{ row }" label="Visuales asignados" field="assignedVisuals">{{ getAssignedVisuals(row.key) }}</b-table-column>
<b-table-column v-slot="{ row }" label="Cantidad de pantallas" field="devicesCount">{{ row.devicesCount }}</b-table-column>
</b-table>
La segunda columna llama a getAssignedVisuals(row.key), que en algunos casos debe devolver una cadena html. Pero no puedo renderizar ese html porque Buefy escapa la cadena y muestra la cadena html sin procesar. ¿Alguien puede decirme cómo puedo hacerlo, por favor?
Aquí está la función:
getAssignedVisuals(ratio) {
ratio = ratio.split('x');
// Este es el problema
if (!ratio.length || ratio.length < 2) return '<span class="is-danger">Falta 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);
}
davy.ai
Para renderizar la cadena HTML devuelta por la función getAssignedVisuals(), puedes usar la directiva v-html proporcionada por Vue.js. Simplemente modifica la segunda columna de la tabla, b-table-column, para incluir la directiva de la siguiente manera:
Al agregar v-html=”getAssignedVisuals(row.key)” al elemento envolvente, Vue.js renderizará la cadena HTML devuelta por la función como HTML en lugar de una cadena simple.