0

В следующем коде я ожидаю, что при нажатии на кнопку отобразится текст из трех строк. Однако, после нажатия появляется одна строка Some text<br>Some text<br>Some text<br>. Как мне сделать, чтобы тег <br> при рендеринге превращался в перенос строки?

Пробовал заменять его на <br/>, на \n и на \r\n, но переноса не было ни в одном случае (при этом \n и \r\n в отредеренной строке не отображалось)

<template>
    <div>
        <form v-on:submit.prevent="onSubmit">
            {{ text }}
            <button type="submit">Click</button>
        </form>
    </div>
</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                 text: "",
            }
        },
        methods: {
            onSubmit: function(event){
                 this.text  = "Some text<br>";
                 this.text += "Some text<br>";
                 this.text += "Some text<br>";
            }
        }
    }
<script>
2
  • например raw html
    – Grundy
    28 авг 2018 в 21:29
  • Почитал, понял, что в принципе подходит, но переделал все на отрисовку массивом отдельных строк. Оформите, пожалуйста, свой комментарий как ответ 28 авг 2018 в 22:06

1 ответ 1

1

Если вы хотите вывести HTML, вам понадобится директива v-html.

Обратите внимание, что в vue 2.0 тройные усы({{{ expression }}}) устарели, вы должны использовать только v-html.

new Vue({
  el: '#app',
  data () {
      return {
          text: []
      }
  },
  methods: {
      onSubmit (event) {
           this.text.push('Some text')
           this.text.push('Some text')
           this.text.push('Some text')
      }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
    <form @submit.prevent="onSubmit">
        Text: <div v-html="text.join('<br>')"></div>
        <button type="submit">Click</button>
    </form>
</div>

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

Подробнее в офф. документации.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.