Можно ли как-нибудь разграничить v-html и простой текст в шаблоне?

Question

[Andrej Sharapov]

Добрый день!

Есть такая структура json файла:

"add": [
                    "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
                    "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
                    "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.",
                    "<div class='alert info'>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>"
                ],

В нем имеются и простой текст и html теги.

Во Vue.component, сейчас я указываю в шаблоне так:

<ul class="dots">
<template v-for="(value) in p.add">
<li v-html="value"></li>
</template>
</ul>

Можно ли как-нибудь разделить шаблон на простой текст и текст с тегами?

ЗАЧЕМ?
Для элементов списка с классом dots прописаны определенные стили, но для alert хотелось бы их убрать. Я это сделаю, опять же, через стили, но пока не знаю, как разделить html тег и текст.

Comments

[Алексей Ярков]

Пытался понять, но не смог. Вам надо массив add разделить на 2 - просто текст и текст с HTML тегами? Уверены, что это решит вашу проблему? Опишите чего вы добиваетесь.

[Andrej Sharapov]

Алексей Ярков, все завязано на стилях.
Накидал пример
https://jsfiddle.net/k6jzyqwt/

[Алексей Ярков]

Andrej Sharapov, не получится на CSS детектить наличие тегов

[Andrej Sharapov]

Алексей Ярков, ну, я так и подумал. жаль. тогда остается только дробить json
Спасибо за помощь.

[Алексей Ярков]

Andrej Sharapov, да, проще разбить массив на 2 части - с тегами и без

Answer 1

[Антон Антон]

"add": [
	{text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", class: null},
	{text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", class: null},
	{text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", class: 'alert info'},
	{text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", class: 'alert info'},
	{text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", class: 'alert info'},
	{text: "Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.", class: null},
],

<ul class="dots">
<template v-for="(value) in p.add">
<li :class="value.class">{{value.text}}</li>
</template>
</ul>

Comments

[Andrej Sharapov]

class: 'alert info' - алерт тут как простой див. Вместо него может быть что угодно.

[Антон Антон]

ну сделайте вместо class булево поле isHtml и через v-if разделяйте... а вообще v-html - последнее дело и прямой путь к xss. Лучше логику поприбивать.