时间戳

首页 > 解决方案 > Vue如何解析来自Api的textarea字符串中的换行符？

javascript - Vue如何解析来自Api的textarea字符串中的换行符？

问题描述

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

line one
line two2

但如果我myText从 API 获取，它会显示\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>

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

标签： javascriptvue.jsvuejs2textarealine-breaks

解决方案

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

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

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

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

推荐阅读