Vue 如何解析来自 Api 的文本区域字符串中的换行符？

Question

我正在使用 Vue 2，我需要在带有换行符的文本区域中显示 myText 变量。如果我在 textarea 中使用静态变量，则换行符可以正常工作。它显示：

line one
line two2

但是如果我从 API 中得到 myText，它会将 \n 显示为文本：

line one\nline two2

此代码用于说明

 <template>
  <div class="Test">  
    <textarea name="name" v-model="myText" >   </textarea> 
  </div>
</template>

JavaScript

 <script>
    export default {
      name: 'Test',
       data: () => ({
          myText: ' line one\nline two2 ' 
       }), 
       created(){
         this.getTextFromApi();
       },
       methods:{
           getTextFromApi(){ 
                ajax()
                 .done(function(Response){ 
                    this.myText = Response.text;   
                 };
           },
      }
    } 
</script>

那么如何让文本区域读取来自 Api 的 \n 作为换行符，而不是文本？

Answer 1

您的 API 文本似乎有双反斜杠，例如“\n”之类的字符串被转义为“\\n”并输入到您的 API。如果是这样，这将起作用：

this.myText = Response.text.replace('\n','\n');

这会在 \n 中留下换行符。回调似乎也需要一个箭头函数：

.done((Response) => { 
   this.myText = Response.text.replace('\n','\n');   
})

Vue 如何解析来自 Api 的文本区域字符串中的换行符？

Vue how to parse a line break in a textarea string that comes from an Api?

javascript

textarea

line-breaks

vue.js

vuejs2