VueJS Печать HTML на страницу

Question

У меня есть свойство, которое содержит строку HTML как один из ее атрибутов.

Когда я пытаюсь напечатать это на странице в моем шаблоне, он на самом деле печатает HTML. Таким образом, текст содержит HTML-теги, и сам он не интерпретируется браузером как HTML.

Как это исправить?

Шаблон:

<div class="description"> 
    {{ property.description }} 
</div> 

Выход:

<p>Suscipit est aut molestiae provident quis magnam.</p> <p>Nesciunt iure impedit sint iste.</p> <p>Aspernatur repudiandae laborum dolor harum magnam officiis ad nihil.</p> <p>Non deserunt rerum adipisci voluptates est eos et.</p> 

Answer 1

Согласно docs:

двойные усики интерпретирует данные в виде обычного текста, а не HTML. Для вывода реального HTML вам нужно будет использовать тройные усы.

Используйте 3 фигурные скобки, чтобы выполнить задание:

<div class="description"> 
    {{{ property.description }}} 
</div> 

Sidenote (также из документации):

Динамически рендеринга произвольный HTML на вашем сайте может быть очень опасно потому это может легко привести к атакам XSS. Используйте только интерполяцию HTML на доверенном контенте и никогда не предоставляйте контент, предоставленный пользователем.

Answer 2

Теперь мы используем Vue2, это немного изменилось. Согласно docs, нам необходимо использовать директиву v-html.

В качестве примера, я сделал кнопку загрузки так:

<button type="submit" v-html="loading ? loadingText : 'Login'"> 

где переменные представляют собой:

data: function (router) { 
    return { 
    loading: false, 
    loadingText: '<i class="fa fa-spinner fa-spin"></i> Loading...', 
    } 
} 

Это будет производить:

и когда состояние loading изменено на true