Как добавить элемент html внутри привязки в nuxt или vue - PullRequest
Новая
       50

Как добавить элемент html внутри привязки в nuxt или vue

0 голосов
/ 02 октября 2019

Как заголовок, я хочу попробовать добавить элемент html <br /> в привязку данных, но я не могу сделать это правильно, я совершенно не понимаю, как это сделать правильно

скажем, у меня есть этот текст I like to playing games и я хочу добавить <br /> вот так I like playing <br /> games, это звучит просто, верно? но я не могу сделать это прямо в привязке данных.

это мой код: 

<aqua-text
 class="text-position"
 :b-section-title="'I like to playing' + <br /> + 'games'"
 :description="
 'Game is fun after all'
 "
/>

вот как выглядит <aqua-text>: 

<template>
  <div>
    <h1>{{ bSectionTitle}}</h1>

    <h2 class="bold">
      {{ description}}
    </h2>
  </div>
</template>

<script>
export default {
  props: {
    bSectionTitle: {
      type: [String]
    },
    description: {
      type: [String]
    },
  }
};
</script>

Может кто-нибудь помочь мне решить эту проблему и объяснить, где я здесь не прав?

1 Ответ

2 голосов
/ 02 октября 2019

Заменить 

<h1>{{ bSectionTitle}}</h1>

на это: 

<h1 v-html="bSectionTitle"></h1>

В документации говорится:

Двойные усы интерпретируютданные в виде простого текста, а не HTML. Чтобы вывести настоящий HTML, вам нужно использовать директиву v-html

Но учтите, что:

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

Если вам нужно визуализировать контент, предоставленный пользователем, используйте любой html sanitizer перед передачей контента на v-html

...