뷰티파이 대화 상자의 문자열에 새 줄을 삽입할 수 없습니다.

뷰티파이 대화 상자의 문자열에 새 줄을 삽입할 수 없습니다.

문자열에 \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'을 사용해 보았습니다.

다음 줄의 두 번째 문장이 필요해요.

여기 제가 받은 결과의 스크린샷이 있습니다.

어떤 도움이라도 주시면 감사하겠습니다.잘 부탁드립니다.

를 사용해 주세요.<br/>대신 태그를 붙이다\n다음 줄에 가서 사용하기 위해서v-htmldirective를 지정해 주세요.

  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>

이를 실현하기 위한 한 가지 방법은 각 행을 다음과 같은 블록 레벨 요소로 랩하는 것입니다.<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.

가장 쉬운 방법은 다음과 같이 div를 사용하는 것입니다.

<v-card-text>
      <div>{{ dialogText }}</div>
      <div>Whitsunday Island, Whitsunday Islands</div>
</v-card-text>

코드는 vuetify 카드 문서입니다.

언급URL : https://stackoverflow.com/questions/57945915/unable-to-insert-new-line-in-a-string-of-the-vuetify-dialog