How to resolve html rendering with VUE?

Asked

Viewed 103 times

3

am making a test with the wordpress Rest-api with Vue 2.x, and one of the returned attributes is as follows:

"content":  {
    "rendered": "<P>Bem-vindo ao WordPress. Esse é o seu primeiro post. Edite-o ou exclua-o, e então comece a escrever!</P>\n"
},

There on my page the html "p" is displayed. I tried to resolve with {{{ }}} but the version recognizes more that way. And with v-html also gives error.

wordpress rest vue.js

1 answer

1


In Vue.js 2 you have to use the v-html that takes the variable that has the HTML you want to use:

var data = {
    "content": {
        "rendered": "<P>Bem-vindo ao WordPress. Esse é o seu primeiro post. Edite-o ou exclua-o, e então comece a escrever!</P>\n"
    }
};

var demo = new Vue({
    el: '#demo',
    data: data
});
<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo">
    <div v-html="content.rendered"></div>
</div>

jsFiddle: http://jsfiddle.net/58toLeoL/

Browser other questions tagged wordpress rest vue.js

You are not signed in. Login or sign up in order to post.