0

tenho o seguinte código em um arquivo .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>

Mas ele não funciona, ele interpreta o código como texto e não coloca o icone. Como posso fazer para adicionar um ícone a tabela?

1
  • Como a sua pergunta esta incompleta, a solução genérica é a diretiva v-html(#docs). Porém nada disso importa se não conhecermos o código fonte do componente <b-table>. Você poderia mostrar o código deste componente ou editar a pergunta para adicionar uma tag com a biblioteca que você está usando? 26/09/2019 às 12:49

1 Resposta 1

1

Passa um campo fields no data e nele insere uma chave e um label, e no Html cria um slot dentro do b-table com a tag i pegando os valores do data:

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

Também troque o nome do campo opção por opcao, pois, isto pode ocasionar erros no Javascript.

3
  • isso não resolveu... continuou com exatamente o mesmo problema
    – dani
    26/09/2019 às 16:04
  • Estranho, aqui funcionou perfeitamente: codepen.io/leandrobeandrade/pen/KKPYVNB
    – LeAndrade
    26/09/2019 às 16:35
  • estranho. mesmo copiando e colando seu codigo, aqui nao vai..
    – dani
    26/09/2019 às 18:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .