[Vuejs]-Vuejs2 print array elements seperated by a line break

by

3👍

✅

By default the {{ var }} notation in Vue escapes any HTML. To output raw HTML, you can use v-html directive:

<div v-html="[ 
    person.address_1, 
    person.address_2, 
    person.zip_code + ' ' + person.station_city, 
    person.country_name 
].join('<br>')"/>
👤Bogdan

1👍

If you don’t want to use v-html because it’s dangerous : https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.

You can instead use the <pre> tag : https://www.w3schools.com/tags/tag_pre.asp

So for this you would need a computed method:

<pre>{{ formattedAddress }}</pre>

computed: {
  formattedAddress () {
    return `${this.person.address_1}\n${this.person.address_2}\n${this.person.zip_code} ${this.person.station_city}\n${this.person.country_name}`
  }
}
👤BTL

Leave a comment