Unable to insert New Line in a string of the vuetify dialog

Question

I attempted to insert a new line in the string which is the Vuetify dialog text by using \n in the string. But it does not work.

Here is the code for the function that calls Vuetify dialog

handleDialog()
{
    this.dialogHeading = "Clearing all component data"
    this.dialogText = "Do you really want to clear all the component data?\nThis will clear the components except the pressure and composition basis!"
    this.dialogBtn1 = "Cancel"
    this.dialogBtn2 = "Yes"
    this.isDialog = true
  
}

And here is the code for displaying the Vuetify dialog

<v-layout row wrap  >
   <v-flex class="text-xs-center">
       <v-dialog v-model="isDialog" persistent max-width=400>
          <v-card>
              <v-card-title  class=" error title white--text 
              darken-2 font-weight-bold">{{dialogHeading}}
              </v-card- title>
              <v-card-text>{{dialogText}}</v-card-text>
              <v-card-text v-if="dialogText2">{{dialogText2}}
              </v-card-text>

              <v-card-actions   >
                <v-btn  v-if="dialogBtn1" flat class=
                "align-content-center d-flex mx-auto" dark 
                color="red darken-1 font-weight-bold" 
                text 
                @click="clearDialog('no')">{{dialogBtn1}}</v-btn>
                <v-btn  v-if="dialogBtn2" flat 
                class="align-content-center d-flex mx-auto 
                font-weight-bold" dark color="green darken-1" 
                text @click="clearDialog('yes')">{{dialogBtn2}}
                </v-btn>
              </v-card-actions>
          </v-card>
      </v-dialog>
   </v-flex>
            
</v-layout>

I've tried using '\n' .

I need the second sentence in the next line

Here is the screenshot of the result that I get

Any help would be appreciated. Thank you in advance

Solution 1

You should use <br/> tag instead of \n in order to go to the next line and use v-html directive to render that string :

  this.dialogText = "Do you really want to clear all the component data?<br/>This will clear the components except the pressure and composition basis!"

template:

  <v-card-text v-html="dialogText"></v-card-text>

Solution 2

One way to achieve this would be to wrap each line in a block-level element such as a <div> within the template. The original string could be split on newlines and iterated accordingly:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
  data () {
    return {
      dialogText: 'First line\nSecond line'
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.css" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-card>
      <v-card-title>Title</v-card-title>
      <v-card-text>
        <div v-for="(text, index) in dialogText.split('\n')" :key="index">
          {{ text }}
        </div>
      </v-card-text>
    </v-card>
  </v-app>
</div>

This retains the default escaping behaviour that would be lost using v-html.

Solution 3

The easiest way is to use div, like this:

<v-card-text>
      <div>{{ dialogText }}</div>
      <div>Whitsunday Island, Whitsunday Islands</div>
</v-card-text>

The code is from vuetify card docs