如何保留多行格式 <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>