Question

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

这个描述有换行符但是当查看包含描述的Vue数据元素时，我看到它只是一个包含内容的字符串 - 分隔符已经消失。

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

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: