I have variable array of objects, one of which is contains element p in the string. And I want to append to element div.profile-description
But the result is vue js return raw html to div.profile-description
I want to p in the string bee element in html
var interviewees = [
{name: 'Anthony', profession: 'Developer', description: '<p>Now he works in one</p><p>very famous pany</p>'},
{name: 'Erick', profession: 'Gamer', description: '<p>He is focusing on playing</p><p>the heroes of the storm game</p>'}
];
var setDescription = new Vue({
el: '.profile-description',
data: {
interviewee_description: interviewees[1].description
}
});
<script src=".3.0/vue.js"></script>
<div class="profile-description">
{{ interviewee_description }}
</div>
I have variable array of objects, one of which is contains element p in the string. And I want to append to element div.profile-description
But the result is vue js return raw html to div.profile-description
I want to p in the string bee element in html
var interviewees = [
{name: 'Anthony', profession: 'Developer', description: '<p>Now he works in one</p><p>very famous pany</p>'},
{name: 'Erick', profession: 'Gamer', description: '<p>He is focusing on playing</p><p>the heroes of the storm game</p>'}
];
var setDescription = new Vue({
el: '.profile-description',
data: {
interviewee_description: interviewees[1].description
}
});
<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.3.0/vue.js"></script>
<div class="profile-description">
{{ interviewee_description }}
</div>
Share
Improve this question
edited Feb 8, 2019 at 21:27
user513951
13.7k7 gold badges70 silver badges89 bronze badges
asked Apr 28, 2017 at 3:16
Anthony DekociAnthony Dekoci
1221 gold badge2 silver badges7 bronze badges
1
- 1 vuejs/v2/guide/syntax.html#Raw-HTML – Bert Commented Apr 28, 2017 at 3:20
2 Answers
Reset to default 6You need use the v-html
directive:
<div v-html="interviewee_description" class="profile-description"></div>
Alert:
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content. https://v2.vuejs/v2/guide/syntax.html#Raw-HTML
Use the v-html directive.
<div class="profile-description">
<div v-html="interviewee_description"></div>
</div>
Typically, you should use a selector that only returns a single element. class
will have unexpected results if there are more than one that match your selector.
Example.