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
    Commented 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? Commented el 3 mar. 2018 a las 9:16
  • exacto es basicamente eso, no se interpreta como parrafos
    – avilac3
    Commented 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
    Commented 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
    Commented el 3 mar. 2018 a las 14:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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