无法在 vuetify 对话框的字符串中插入新行 [英] Unable to insert New Line in a string of the vuetify dialog

问题描述

我试图通过在字符串中使用 \n 在作为 Vuetify 对话框文本的字符串中插入一个新行.但它不起作用.

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.

这是调用Vuetify对话框的函数的代码

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
  
}

这是显示 Vuetify 对话框的代码

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>

我试过使用 '\n' .

I've tried using '\n' .

我需要下一行的第二句话

I need the second sentence in the next line

这是我得到的结果截图

任何帮助将不胜感激.提前致谢

Any help would be appreciated. Thank you in advance

推荐答案

为了转到下一行并使用 v-html 指令来呈现该字符串:

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!"

模板:

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

这篇关于无法在 vuetify 对话框的字符串中插入新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！