无法在 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’ 。

我需要下一行的第二句话

这是我得到的结果的屏幕截图

任何帮助，将不胜感激。先感谢您

原文由 rhythmo 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Boussadjra Brahim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

实现此目的的一种方法是将每一行包装在模板中的块级元素中，例如 <div> 。原始字符串可以在换行符上拆分并相应地迭代：

 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/font@3.9.97/css/materialdesignicons.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify@2.0.17/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.0.17/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>

这保留了使用 v-html 会丢失的默认转义行为。

原文由 skirtle 发布，翻译遵循 CC BY-SA 4.0 许可协议