Как включить обработку html тегов в переменной ${}?

Question

Юлия

vue

Как включить обработку html тегов в переменной ${}?

Как правильно настроить обработку HTML тегов? Я попробовал два варианта, но ни один из них не работает. В первом случае ничего не отображается, а во втором теги отображаются как текст. 

Код:
```
<p :html="createPatternString(cardInfo)"></p>
```

```
<p>createPatternString(cardInfo)</p>
```

Функция createPatternString(s) {
    const result = `<b>${s.amount}</b> ${s.symbol} (${s.amount_usd.toLocaleString('en', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
    })}) moved from ${s.from} to ${s.to}`
    return result
}

21 ноября 2023 г. 11:09

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для включения обработки HTML тегов в переменной ${} вам необходимо использовать директиву v-html. 

Первый вариант, который вы попробовали, верный. Однако, чтобы он работал, необходимо добавить директиву v-html перед переменной ${} в шаблоне. 

Ваш код должен выглядеть следующим образом:

```html
<p v-html="createPatternString(cardInfo)"></p>
```

Во втором случае вы использовали обычный текст, а не переменную, поэтому отображались только теги как текст. Чтобы второй вариант работал корректно, вы должны использовать такой синтаксис:

```html
<p>{{ createPatternString(cardInfo) }}</p>
```

Таким образом, включив директиву v-html в вашем первом варианте, вы должны получить желаемый результат. Во втором варианте необходимо использовать синтаксис между двумя фигурными скобками.