Не удается вставить новую строку в строку диалогового окна vuetify
Я попытался вставить новую строку в строку, которая является текстом диалогового окна Vuetify, используя \n в строке. Но это не работает.
Вот код для функции, которая вызывает диалог 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'.
Мне нужно второе предложение в следующей строке
Вот скриншот результата, который я получаю
Любая помощь будет оценена по достоинству. Заранее спасибо
Ответы - Не удается вставить новую строку в строку диалогового окна vuetify / Unable to insert New Line in a string of the vuetify dialog

15.09.2019 07:15:59
Вы должны использовать <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>




15.09.2019 07:27:28
Один из способов добиться этого-обернуть каждую строку в элемент уровня блока, такой как <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
.
