Блог

Главная - Вопросы по программированию - v-оповещение отображает многострочный текст?

v-оповещение отображает многострочный текст?

#vue.js #vuetify.js

#vue.js #vuetify.js

Вопрос:

Я хочу использовать v-alert для отображения сообщений об ошибках, которые могут возвращаться с сервера api, однако мне нужно отобразить более одной строки, и, похоже, я не могу заставить это работать.

Вещи, которые я пробовал:

Используя <pre> блок внутри v-alert, но тогда это выглядит необычно с моноширинным шрифтом, похожим на courier.

Ручная установка разрыва строки <br/> в статическом тексте в содержимом v-alert работает, но не в том случае, если я затем попытаюсь привязать его к свойству данных той же самой строки, что приводит к отображению <br/> буквально (т.Е. "test line one<br/>test line two" ).

Я пробовал использовать блок div внутри оповещения в стиле word-wrap: break-word; , но это тоже не работает, оно по-прежнему отображается в виде одной строки.

Любые идеи о том, как отображать несколько строк в этом компоненте, приветствуются.

Ответ №1:

Попробуйте использовать директиву v-html.

https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

Этот код работает

HTML-код:

 <div id="app">
  <v-app id="inspire">
    <div>      
      <v-alert
        :value="alert"
        type="success"
        transition="scale-transition"
      >
        <span v-html="datas"></span>
      </v-alert>
    </div>
  </v-app>
</div>

Код Javascript:

 new Vue({
  el: '#app',
  data () {
    return {
      alert: true,
      data1: 'Hello',
      data2: 'World!'
    }
  },
  computed: {
    datas() {
      return this.data1   ' <br> '   this.data2;
    }
  }
})

Комментарии:

1. Это абсолютно так же работает, но я выбрал другое решение только потому, что оно лучше сочетается с другим кодом, но это очень полезная вещь, о которой стоит знать, и спасибо за ее публикацию.

2. Это может быть более уязвимым для XSS-атак, не так ли? Вы должны очищать вводимые строки каждый раз, когда используете их для рендеринга HTML.

Ответ №2:

Вы можете добавить класс в свой v-alert и настроить его для использования white-space: pre-line в CSS, например

 <v-alert
  :value="true"
  type="success"
  class="multi-line"
  >This is a
  success alert.</v-alert>
  
 .multi-line {
  white-space: pre-line;
}

Просто не переводите новые строки до или после вашего текста.

Демонстрация ~ https://codepen.io/anon/pen/WWQvqO