javascript - 无法在 vuetify 对话框的字符串中插入换行符

Question

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

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

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 对话框的代码

<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' 。

我需要下一行的第二句

这是我得到的结果的截图

如有任何帮助，我们将不胜感激。提前谢谢你

Answer 1

你应该使用 <br/>标记而不是 \n为了转到下一行并使用 v-html渲染该字符串的指令:

  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>