Line break rendering issue in vue js

240 Views Asked by At

I have a VueJS form and I send the content of my textarea on the java backend side to be sent in email format.
I manage to make line breaks when I write my message on and when I send the content on the back end side my line breaks are ignored when rendering the mail format.
How to do on the front side so that my line breaks are sent on the back side?

<template>
  <div>
    <form @submit.prevent="create">
      <label for="comment-title"></label>
      <input
        type="textarea"
            id="comment-title"
            label="Message"
        placeholder="Enter your message"
        v-model="comment"
      />
      <button type="submit">create</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comment: ''
    };
  },
  methods: {
    create() {
      const msg = {
        createdAt: new Date(),
        comment: this.comment
      };
      this.$store.dispatch("createMsg", msg)
      this.comment = ''
    }
  }
};
</script>
1

There are 1 best solutions below

0
Mauli999 On

What does your linebreak within your backend string look like?

You could try to replace the backend linebreak with a /n when assigning the value to this.comment like:

Assuming your bstring is "Line1 #br Line2"

this.comment = bstring.replace("#br", "/n")

That should work, atleast it does for me if i get your problem right.