Перенос строки в переменной шаблона vue

178

28 ноября 2018, 04:20

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

Пробовал заменять его на  , на \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>

Answer 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 только с доверенным кодом, и никогда не подставляйте туда контент, созданный пользователем.

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