如何在多行 <v-text-field> 中保留格式？

Question

我使用 v-text-field 从用户那里收集冗长的描述。

此描述有换行符，但在查看包含描述的 Vue 数据元素时，我发现它是一个仅包含内容的字符串 - 分隔符消失了。

有没有办法在 Vue 数据元素中保留新行？

Answer 1

格式实际上存在，只是在分析绑定的值（字符串）时不可见属性。

下面是重用 textarea 内容的示例。在第一个 placeholder 中键入几行内容将以多种方式进行操作，并保留格式

new Vue({
  el: "#app",
  data: {
    comment: 'placeholder'
  },
  computed: {
    jcomment() {
      return JSON.stringify(this.comment)
    },
    bcomment() {
      return JSON.parse(this.jcomment)
    }
  }
})

p {
  background-color: lightgray;
  padding: 5px 5px 5px 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<div id="app">
  <p>the textarea to type into</p>
  <v-text-field multi-line v-model="comment"></v-text-field>
  <p>a dynamic copy of the textarea above</p>
  <v-text-field multi-line v-model="comment"></v-text-field>
  <p>a "pre" version of the content</p>
  <pre>{{comment}}</pre>
  <p>a JSON version of the content</p>
  {{jcomment}}
  <p>the JSON version above, parsed and displayed in a textarea</p>
  <v-text-field multi-line v-model="bcomment"></v-text-field>
</div>

如何在多行 <v-text-field> 中保留格式？

How to preserve formatting in a multiline <v-text-field>?

vuetify.js