Vuetify v-data-table, How to render line break (enter key) from v-textarea input

Question

I have input data from v-textarea with enter key and the result like

Hello\nWorld

Rendering this in v-data-table with default or rawHtml not working

<v-data-table 
:headers="headers"
:items="dataTable"
hide-default-footer>
<template v-slot:item="props">
<tr>
<td><span v-html="props.item.s"></span></td> <!-- rawHtml -->
<td>{{ props.item.s }}</td> <!-- default-->
</tr>
</template>
</v-data-table>

Could you make this clearer by explaining `$this->dataX` – Malo Marrec Sep 04 '20 at 15:45 — Malo Marrec, Sep 04 '20 at 15:45
$this->dataX value is string "Hello\nWorld" – Ardian Zack Sep 05 '20 at 10:28 — Ardian Zack, Sep 05 '20 at 10:28
with string \n is enter key get from v-textarea – Ardian Zack Sep 05 '20 at 10:29 — Ardian Zack, Sep 05 '20 at 10:29

score 1 · Answer 1 · answered Jun 23 '22 at 16:44

Vuetify uses browser conventions to render tables, To render a line break inside a <td>, the suggestion is to either use a pre tag or the CSS style td { white-space:pre }

See answers to this post.

I included the CSS inline using a template within the v-data-table

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
                {
                    text: 'ID',
                    align: 'start',
                    sortable: false, 
                    value: 'name'
                }, 
                {
                    text: 'Description',
                    align: 'start',
                    sortable: false, 
                    value: 'description'
                }
            ],
            items: [
                {
                    name: "001",
                    description: `First line of content.  
Second line of content.  
      Third line of content (with left tab).`
                },
                {
                    name: "002",
                    description: `First line of content.  
Second line of content.  
Third line of content (with left tab).`
                },
            ]
    }
  },
})


<!-- begin snippet: js hide: false console: true babel: false -->

<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app id="other">
    <v-data-table :headers="headers" :items="items" item-key="name" class="elevation-1">
      <template v-slot:item.description="{ item }">
               <div style="white-space: pre-wrap;">{{ item.description }}</div>
            </template>
    </v-data-table>
  </v-app>
</div>

Vuetify v-data-table, How to render line break (enter key) from v-textarea input

1 Answers1