Comment obtenir le caractère de nouvelle ligne (\n) dans le contenu du slot Vue 3 ?

Question

J'essaie de migrer les composants Vue 2 vers Vue 3. L'idée est comme "ln2br" de Vue (en fait "ln2p").

Alors...

<my-linebreaker>
  This is the line 1.
  This is the line 2.
  This is the line 3.
</my-linebreaker>

devrait rendre :

<div>
  <p>  This is the line 1.</p>
  <p>  This is the line 2.</p>
  <p>  This is the line 3.</p>
</div>

---

C'est mon composant de travail MyLinebreaker.vue pour Vue 2 Code :

<template>
  <div>
    <p v-for="(line, index) in lines" :key="index">{{ line }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    lines () {
      const slot = this.$slots.default
      const text = slot ? slot[0].text : ''

      return text.split('\n')
    }
  }
}
</script>

L'API Slots a changé dans Vue 3 alors j'ai essayé de réécrire mon lines calcul :

<script>
export default {
  computed: {
    lines () {
      const slot = this.$slots.default
      const text = slot ? slot()[0].children : ''

      return text.split('\n')
    }
  }
}
</script>

Mais le rendu est faux (toutes les lignes sont sur une seule ligne) à cause des .children 不包含 n caractères.

<div>
  <p>  This is the line 1. This is the line 2. This is the line 3.</p>
</div>

Alors, comment obtenir le contenu textuel du caractère dans Vue 3n ?

Answer 1

sera compilerOptions.whitespace 更改为 preserve dans Vue, comme indiqué ici.

app.config.compilerOptions.whitespace = 'preserve'

Pour plus de détails, consultez la documentation Vue 3 : https://v3.vuejs.org/api/application-config.html#compileroptions-whitespace