how can i pass json to html

Question

how can i pass json to html

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

Hello, I'm starting in the world of vuejs I'm consuming a detail field where I have HTML code:

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

How do I run the HTML when executing the code and not display the <p> tags and the others?

my json is like this:

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

my full code

<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
      });
    }
  }
});

Thanks

javascript html vue.js

asked by avilac3 03.03.2018 в 06:20

source

2 answers

0

Sure you're not accessing the json well ... probe and if it works normally this way:

You save your json in a variable

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

Then you access your paragraphs in this way:

tujson.detalle;

answered by 03.03.2018 в 15:00

Help with error in a for cycle to obtain a value of an array Problems working with PHP Classes

score 2 · Accepted Answer

Vue.js by default interprets all values within the double mustaches as plain text to avoid XSS attacks. To be able to print html you will need to use the directive of Vue.js v-html="datoAImprimir" .

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

It is not recommended to print raw html that has the user as a source without first validating that there is no malicious code.

I recommend that you take a look at the following pages for more information:

link
link