Insert icone into a table

Question

I have the following code in a file . Vue:

<template>
  <div class="col-6">   
    <ModalRegister/>
    <div class="col-12">
      <b-table hover :items="rowData"></b-table>
    </div>

  </div>
</template>

<script>
  import ModalRegisterfrom './ModalRegister';

  export default {
    data() {
      return {
        rowData: [
          {nome: 'fts-001', modelo: "modelinho1", opção: "<i class='far fa-edit'></i>"}, 
          {nome: 'fts-002', modelo: "modelinho2", opção: "<i class='far fa-edit'></i>"}, 
          {nome: 'fts-003', modelo: "modelinho3", opção: "<i class='far fa-edit'></i>"}, 
          {nome: 'fts-004', modelo: "modelinho4", opção: "<i class='far fa-edit'></i>"}, 
        ],
      }
    },
    components: {
      ModalRegister
    }
  }
</script>

But it does not work, it interprets the code as text and does not place the icon. How can I add an icon to the table?

Answer 1

Passes a field fields in the date and inserts a chave and a label, and in the Html creates a slot within the b-table tagged i taking the date values:

<template>
  <div class="col-6">   
    <ModalRegister/>
    <div class="col-12">
      <b-table hover :fields="fields" :items="rowData">
        <template slot="opcao" slot-scope="{ item: { opcao} }">
          <i :class="'far ' + opcao"></i>
        </template>
      </b-table>
    </div>
  </div>
</template>

<script>
import ModalRegisterfrom './ModalRegister';

export default {
  data() {
    return {
      fields: ['nome', 'modelo', { key: 'opcao', label: 'opção' }],
      rowData: [
        {nome: 'fts-001', modelo: "modelinho1", opcao: "<i class='fa-edit'></i>"}, 
        {nome: 'fts-002', modelo: "modelinho2", opcao: "<i class='fa-edit'></i>"}, 
        {nome: 'fts-003', modelo: "modelinho3", opcao: "<i class='fa-edit'></i>"}, 
        {nome: 'fts-004', modelo: "modelinho4", opcao: "<i class='fa-edit'></i>"}, 
      ],
    }
  },
  components: {
    ModalRegister
  }
}
</script>

Also change the name of the field option for option, because, this can cause errors in Javascript.