Search code examples
javascriptvue.jslinefeed

JS(vue.js), How can i use linefeed? (\n)

Im making error messages with notification in Vue.js.

Tutorial Demo: https://admin.vuebulma.com/#/components/notification

Tutorial Codes: https://github.com/vue-bulma/vue-admin/blob/master/client/views/components/Notification.vue

openNotificationWithType: function (type) {
  openNotification({
    title: 'Error',
    message: 'Hello\nWorld',
    type: type
  })
}

in this code, when i use \n in string, it doesn't render it to linefeed.

So i have been searching how to apply linefeed in JS, but i can't exactly answer.

I tried below:

1)

 message: `Hello
 World`

2) 

 message: 'Hello' + 
 '' + 'World'

3)

 message: 'Hello'
 + 'World'

4) 

 message: 'Hello' + '\n' + 'World'

5)

 message: 'Hello<br/>World'

6)

 message: 'Hello<br>World'

7)

 message: `Hello \
 World`

8)

 message: [`Hello`,
           `World`].join(' ')

Results:

results of error message

* I'm in Mac OS.

Solution

  • The browser condenses all whitespace in text content into a single space, and you can't include HTML entities in normal (mustache) interpolation. You need the v-html directive.

    <div v-html="rawHtml"></div>

    The contents of this div will be replaced with the value of the rawHtml property, interpreted as plain HTML - data bindings are ignored.

    So you would have to modify the notification component to use v-html, and then use #5 with it.