Vue 2 is the framework I am currently working on, and I have encountered an issue with displaying the myText variable in a textarea with line breaks. When using a static variable in the textarea, the line breaks function properly, showing:
line one
line two2
However, when retrieving myText from an API, it displays the \n as text:
line one\nline two2
This issue can be better understood with the following code snippet:
<template>
<div class="Test">
<textarea name="name" v-model="myText" > </textarea>
</div>
</template>
Here is the related JavaScript code:
<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>
Now the question arises: How can the textarea interpret the \n received from an API as a line break instead of a text?