Не удается вставить новую строку в строку диалогового окна vuetify


Не удается вставить новую строку в строку диалогового окна vuetify

15.09.2019 07:12:37 Просмотров 75 Источник

Я попытался вставить новую строку в строку, которая является текстом диалогового окна 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'.

Мне нужно второе предложение в следующей строке

Вот скриншот результата, который я получаю enter image description here

Любая помощь будет оценена по достоинству. Заранее спасибо

javascript html vue.js vuejs2 vuetify.js
У вопроса есть решение - Посмотреть?

Ответы - Не удается вставить новую строку в строку диалогового окна vuetify / Unable to insert New Line in a string of the vuetify dialog

Является ответом!
Boussadjra Brahim

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>
Источник
https://stackoverflow.com/questions/57945915/unable-to-insert-new-line-in-a-string-of-the-vuetify-dialog/57945950#comment102305366_57945950
отлично! Спасибо Брахим :)
https://stackoverflow.com/questions/57945915/unable-to-insert-new-line-in-a-string-of-the-vuetify-dialog/57945950#comment102305421_57945950
добро пожаловать, пожалуйста, примите и проголосуйте за мой ответ, если это полезно
https://stackoverflow.com/questions/57945915/unable-to-insert-new-line-in-a-string-of-the-vuetify-dialog/57945950#comment102305609_57945950
Конечно, я так и сделал. Это не позволяло мне сделать это раньше, говоря, что я не могу сделать это раньше 5 минут. Все равно спасибо. Я ценю ваше время :)
skirtle

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.

Источник
https://stackoverflow.com/questions/57945915/unable-to-insert-new-line-in-a-string-of-the-vuetify-dialog/57946054#comment102307041_57946054
Спасибо вам, скиртл, что нашли время ответить на мой вопрос. Я дам вам знать, как это получилось, как только я проверю это.
Помочь в развитии проекта:

Другие вопросы

Ответы на ваши вопросы

Закрыть X