display string on multiple lines

Question

I want to display my string on multiple lines. I already tried something like replaceAll(",", "\n") Here's my Code:

<template>
    <v-form>
        <v-container>
          <v-card
              class="mt-15 pa-4  mx-auto"
              max-width="1000"
              multi-line>
            {{consoleOutput.toString().replaceAll(",", "\n")}}
          </v-card>
        </v-container>
    </v-form>
</template>

<script>
    export default {
        data: () => ({
            consoleOutput: ["This", "should", "be", "on a ", "new Line "],
        })
    }
</script>

I get this output This should be on a new Line. My target is to print each string on a different line and add a index in front of it (equal to console) like:

1. This
2. should
3. be 
4. on a 
5. new Line

Does this answer your question? [Line break in HTML with '\n'](https://stackoverflow.com/questions/39325414/line-break-in-html-with-n) — Filip Seman, May 18 '21 at 14:14
Why don't you use a and loop over consoleOutput, using for example a
tag for each string ... — mahatmanich, May 18 '21 at 14:14

score 3 · Accepted Answer · edited May 18 '21 at 14:19

3

Try to use ol element and v-for to render each li

 <v-card
    class="mt-15 pa-4  mx-auto"
    max-width="1000"
    multi-line
>
    <ol>
        <li v-for="item in consoleOutput" :key="item">{{item}}</li>
    </ol>
</v-card>

edited May 18 '21 at 14:19

Filip Seman

1,252
2
15
22

answered May 18 '21 at 14:14

Boussadjra Brahim

82,684
19
144
164

score 1 · Answer 2 · answered May 18 '21 at 14:19

I think you can do like this.

 <v-container>
  <v-card
      class="mt-15 pa-4  mx-auto"
      max-width="1000"
      multi-line>
      <div v-for="item in consoleOutput.toString().split(',')" :key="item">        
        {{item}}
      </div>
  </v-card>
</v-container>

Please confirm this URL. https://stackblitz.com/edit/vue-gmadqd?file=src%2Fcomponents%2FHelloWorld.vue

display string on multiple lines

2 Answers2