Output each element of an array in Vuejs2 with a line break between each

Question

Output each element of an array in Vuejs2 with a line break between each

I am currently working with vuejs2 and have a select tag where a person is selected, with their address properties directly bound to the element. I need to display the address of the selected person. I attempted to use an array in order to print out the elements with line breaks between them.

{{ 
    [ 
        person.address_1, 
        person.address_2, 
        person.zip_code + ' ' + person.station_city, 
        person.country_name 
    ].join('<br>') 
}}

For example, this should be displayed:

5 Place Charles Béraudier 
Gare de Lyon Part dieu
69003 LYON
France

However, I am facing issues with the formatting of the code. It is displaying the actual code instead of the values.

javascript vue.js vuejs2

Answer 1

Answer №1

In Vue, the default behavior of {{ var }} is to escape any HTML content. If you want to output raw HTML, you can utilize the v-html directive:

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

Answer 2

In Vue, the default behavior of {{ var }} is to escape any HTML content. If you want to output raw HTML, you can utilize the v-html directive:

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

Answer 3

Answer №2

If you're hesitant to use the v-html feature due to its potential risks: https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

Rendering arbitrary HTML dynamically on your webpage can pose a significant security threat as it may expose your site to XSS vulnerabilities. It's advisable to only apply HTML interpolation on content that is trusted, and refrain from using it with user-generated content.

An alternative approach is utilizing the <pre> tag: https://www.w3schools.com/tags/tag_pre.asp

To implement this method, you would require a computed function:

<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}`
  }
}

Answer 4

If you're hesitant to use the v-html feature due to its potential risks: https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

Rendering arbitrary HTML dynamically on your webpage can pose a significant security threat as it may expose your site to XSS vulnerabilities. It's advisable to only apply HTML interpolation on content that is trusted, and refrain from using it with user-generated content.

An alternative approach is utilizing the <pre> tag: https://www.w3schools.com/tags/tag_pre.asp

To implement this method, you would require a computed function:

<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}`
  }
}

Output each element of an array in Vuejs2 with a line break between each

Answer №1

Answer №2

Similar questions

Is there a way to implement absolute imports in both Storybook and Next.js?

Enhance the original array of a recursive treeview in VueJS

How can I select a checkbox dynamically during runtime?

Is it considered bad practice to assign a value to a Vuex property directly in an action rather than using a mutation for the change

Screen content of a post request in Node.js

When attempting to trigger a function by clicking a button in Angular 8 using HTTP POST, nothing is happening as

Can you achieve a click event in Vue without using $refs?

Switching Divs Based on Radio Button Selection in VueJS

Executing Controller Actions within a JavaScript Timer

Errors occur when using jQuery Autocomplete alongside Angular HTTP

"Exploring the Keyboard Shortcuts and Navigation Features of Vuetify 2.x's v-data

Disabling the last control in a formGroup when sorting an array with Angular

Uh oh! You haven't set a QueryClient yet. Make sure to use QueryClientProvider to set

I am looking for a VueJS component that replicates the functionality of http://jsfiddle.net/NuWna/2/

Tips for preloading an ENTIRE webpage

Building multi-dimensional array checkboxes in AngularJS - a step-by-step guide

Using inline SVG in a Vite production build

exploring methods to prevent flash of unstyled content (fouc)

Problem with AngularJS Multiselect checkbox dropdown configuration

Retrieve the entire Vuetify component from v-autocomplete