0

Hola estoy iniciando en el mundillo de vuejs estoy consumiendo un campo detalle donde tengo código HTML:

<p>alhdlkfjaldkfkaldjflkasdfkladsf</p>
<p>asdfaslfdjaslñfjalñsdfjlkñasjfdklajsdfasf</p>
<p>adsfadsf</p>

Cómo hago para al ejecutar el código se ejecute el HTML y no muestre la etiquetas <p> y las otras?

mi json es asi:

  "detalle": "<p>alhdlkfjaldkfkaldjflkasdfkladsf</p><p>asdfaslfdjaslñfjalñsdfjlkñasjfdklajsdfasf</p><p>adsfadsf</p>",

mi codigo completo

<div id="app" v-cloak>

  <div class="sk-double-bounce" v-if="solicitud.length === 0">
    <div class="sk-child sk-double-bounce1"></div>
    <div class="sk-child sk-double-bounce2"></div>
  </div>      

  <div class="grid-item-content" :style="{ 'background': solicitud.color }">
    <div class="text-center" style="border-bottom: 2px solid #333"><h3>Nota #{{ solicitud.id}}</h3></div>
    <div><h4>{{ solicitud.nombre }}</h4></div>
    <div><h4>{{ solicitud.celular }}</h4></div>
    <div><h5>{{ solicitud.email }}</h5></div>
    <div :id="solicitud.id">{{ solicitud.detalle }}</div>
  </div>
</div>

<script type="text/javascript">
var urlSolicitudes = "<?php echo DOMINIO ?>api/solicitudes";
new Vue({
  el: '#app',
  created: function() {
    this.getSolicitudes();
  },
  data: {
    listSolicitudes: []
  },
  methods: {
    getSolicitudes: function() {
      axios.get(urlSolicitudes).then(response => {
        this.listSolicitudes = response.data
      });
    }
  }
});

Gracias

3
  • Hola, no me queda claro lo que deseas haces
    – Cesar
    el 3 mar. 2018 a las 6:10
  • ¿Quieres decir que en tu página aparecen visibles las etiquetas <p> en lugar de ser interpretadas como párrafos? el 3 mar. 2018 a las 9:16
  • exacto es basicamente eso, no se interpreta como parrafos
    – avilac3
    el 3 mar. 2018 a las 13:34

2 respuestas 2

3

Vue.js por default interpreta todos los valores dentro de los double mustaches como texto plano para evitar ataques XSS. Para poder imprimir html necesitarás usar la directiva de Vue.js v-html="datoAImprimir".

<div :id="solicitud.id" v-html="solicitud.detalle"></div>

No es recomendable imprimir raw html que tenga como fuente al usuario sin antes validar que no exista código malicioso.

Te recomiendo que le des un vistazo a las siguientes páginas para más información:

1
  • excelente no sabia esa directiva de Vue.js gracias
    – avilac3
    el 4 mar. 2018 a las 0:55
0

seguro no estas accediendo bien al json... probe y si me funciona normalmente de esta manera:

Guardas tu json en una variable

const tujson = { "detalle": "<p>alhdlkfjaldkfkaldjflkasdfkladsf</p><p>asdfaslfdjaslñfjalñsdfjlkñasjfdklajsdfasf</p><p>adsfadsf`</p>",}

Luego accedes de esta manera a tus parrafos:

tujson.detalle;
1
  • este es mi codigo completo
    – avilac3
    el 3 mar. 2018 a las 14:15

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.