v-html em um v-for

[Concluído]

Wardes Thiago de Carvalho Costa Criador 01/07/2020
Wardes Thiago de Carvalho Costa

Olá, estava fazendo uns testes aqui montando uma tabela trazendo um array de objetos, tipo: object {'title': 'Opened Ticket', 'content': '<h3>Alguma coisa</h3><p>blablalblablabla></p>, ...}', ou seja que trás consigo informação formatada em html, quero que apareça no browser a informação formatada...

Tentei usar o v-html dentro de um td, mas não consegui renderizar o html? Como isso podeia ser feito?

 

Manager Carlos Ferreira 01/07/2020
Carlos Ferreira

Olá, Wardes!
Tudo bem?

Como você aplicou? Pode deixar assim:
<span v-html="objeto.content"></span>

https://br.vuejs.org/v2/guide/syntax.html#HTML

Criador Wardes Thiago de Carvalho Costa 02/07/2020
Wardes Thiago de Carvalho Costa

Queria mostrar os dados dentro do <td> de uma tabela abaixo, tendo que criar um template filho para isso???

<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Títlulo</th>
<th>Problema</th>
<th>Aberto em</th>
</tr>
</thead>
<tbody>
<tr v-for="(tiket, index) in data.data" :key="index">
<td>{{tiket[2]}}</td>
<td>{{tiket[1]}}</td>
<td><span v-html="tiket[21]"></span></td> //Gostaria que aqui fosse exibido marcado em html
<td>{{tiket[19]}}</td>
</tr>
</tbody>
</table>
Manager Carlos Ferreira 03/07/2020
Carlos Ferreira

Será necessário retornar isso em uma propriedade computada: tiket[21]

Tem o código no GitHub?

Criador Wardes Thiago de Carvalho Costa 04/07/2020
Wardes Thiago de Carvalho Costa

Segue o git https://github.com/wtccosta/teste-glpi-api/network/alerts

O codigo está em src/components/OpenTicketComponent.vue. Apaguei o token de autenticação, se precisar me avisa que envio um para vc de uma outra forma, que não no forum.

Manager Carlos Ferreira 07/07/2020
Carlos Ferreira

É pela forma que está fazendo o hender dos components que a diretiva v-html não funciona.
new Vue({
  el: '#app',
  render: h => h(App)
})

Não cheguei a rodar o projeto, mas testa assim (que não funcionar eu valido e te dou uma solução):
new Vue({
  el: '#app',
  components: {
      App
  }
})

E no component App.vue envolva com a div com id "app"

Criador Wardes Thiago de Carvalho Costa 07/07/2020
Wardes Thiago de Carvalho Costa

Desculpa professor, mas não entendi muito bem. Tentei fazer mas não deu certo.

Manager Carlos Ferreira 09/07/2020
Carlos Ferreira

Tem a versão atualizada no GitHub da forma como fez? Vou baixar o seu projeto e fazer um teste amigo.

Criador Wardes Thiago de Carvalho Costa 10/07/2020
Wardes Thiago de Carvalho Costa

Segue: https://github.com/wtccosta/teste-glpi-api/

Eu fiz por base utilizando as lições do curso de vuejs 2. Estou utilizando o template webpack-simple.

Criador Wardes Thiago de Carvalho Costa 14/07/2020
Wardes Thiago de Carvalho Costa

Boa tarde, Carlos. 

Eu estou achando que o proplema é por conta do retorno da api, por exemplo, no banco de dados, o conteúdo em html correspondete a <p>Instalar ponto...</p> está salvo como &lt;p&gt;INTALAR PONTO DE REDE WI-FI&lt;/p&gt;

Ou seja o v-html até traduz o &lt;p&gt; para <p> ou seja o problema é codificação, no php resolvo isso fácil, mas como faria no javascript (no vue)?

Criador Wardes Thiago de Carvalho Costa 14/07/2020
Wardes Thiago de Carvalho Costa

Descobri. Adaptei (Criei um method) um método que achei em https://stackoverflow.com/questions/5302037/javascript-string-replace-lt-into.

htmlToText(html) {
return html.replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&');
}

despois só usar no v-html. Exe <div v-html></div

Mas obrigado pelas ajudas que me forma dadas ;) .

 

Manager Carlos Ferreira 15/07/2020
Carlos Ferreira

Olá, Wardes!

Desculpas a demora em te responder amigo, aqui está uma loucura rs

Que bom que conseguiu resolver, meus parabéns!

E obrigado por compartilhar a solução que encontrou.

Abs;

Sabe a Solução? Ajude a resolver!

Precisa estar logado para conseguir responder a este ticket!

Clique Aqui Para Entrar!