Vue.js: string interpolation with line break

Question

I am having trouble getting a line break into string interpolation that is printed out in my HTML

this.externalUsers = data.externalUser.map(element => `Name: ${element.firstName} ${element.lastName}\n <br><br />Email: ${element.email}`);

In the line above I am trying to get the first and last name on one line and email on the next

<v-radio 
  v-for="item in externalUsers" 
  :key="item.id"
  :label="item"
  :value="item"
></v-radio>

I am using Vue so I am printing it out with a for a loop.

Here is the result

Answer 1

You can use white-space: pre-line; as follows:

new Vue({
  el:"#app",
  vuetify: new Vuetify(),
  data: () => ({
    externalUser: [
      { firstName: 'firstName1', lastName: 'lastName1', email: 'email1' },
      { firstName: 'firstName2', lastName: 'lastName2', email: 'email2' },
      { firstName: 'firstName3', lastName: 'lastName3', email: 'email3' },
    ]
  }),
  computed: {
    externalUsers() {
      return this.externalUser.map(element => 
        `Name: ${element.firstName} ${element.lastName}\nEmail: ${element.email}`);
    }
  }
});

#app { white-space: pre-line; }

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<v-app id="app">
  <v-radio-group>
    <v-radio 
      v-for="item in externalUsers" 
      :key="item.id"
      :label="item"
      :value="item"
    ></v-radio>
  </v-radio-group>
</v-app>