Troubleshooting line break appearance glitch in Vue.js

When using my VueJS form, I encounter an issue where line breaks in my textarea content are ignored when rendering the email format on the Java backend side. How can I ensure that my line breaks are preserved when sending the content from the front end to the back end?

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

Answer №1

How do you handle line breaks in your backend string?

One way to handle line breaks is to replace them with /n when assigning the value to this.comment:

For example, if your backend string looks like "Line1 #br Line2"

You can use this code: this.comment = bstring.replace("#br", "/n")

This solution should work for your issue, based on my understanding of it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reduce the noise from different versions by utilizing package-lock.json

There may not be a clear-cut answer, but I'm curious to hear how others handle the issue of package-lock.json causing problems when committing to their node repository. Many opinions lean towards committing package-lock.json - ensuring consistent dep ...

Is the canvas refusing to disappear?

My HTML5 Canvas element is not disappearing as expected. I wrote a timer function to hide the element when the timer hits 0. I tested this using an alert flag and it worked perfectly. Problem: if (TotalSeconds <= 0) { ctx.clearRect(0, 0, canvas.w ...

React causing issues when displaying PNG images on browser

Running into an issue with my React app where I am unable to render a PNG file from the "src" folder. The error message pops up on Google Chrome browser, showcasing the problem: https://i.stack.imgur.com/y8dJf.png Unfortunately, my project doesn't ha ...

Combining Json, Jquery Autocomplete, and PHP to customize the displayed search options based on multiple items within the Json data

I have a PHP file that returns an array of results, with the 'Name' field being one of them. I want to customize my jQuery autocomplete feature to only search by the 'Name' field and suggest results based on that. However, once a sugges ...

Stopping a velocity.js animation once it has completed: is it possible?

For the pulsating effect I'm creating using velocity.js as a fallback for IE9, refer to box2 for CSS animation. If the mouse leaves the box before the animation is complete (wait until pulse expands and then move out), the pulsating element remains vi ...

Unable to locate the value of the query string

I need help finding the query string value for the URL www.example.com/product?id=23 This is the code I am using: let myApp = angular.module('myApp', []); myApp.controller('test', ['$scope', '$location', '$ ...

Assign a class to a DIV element depending on the ID of an object using Angular

I'm trying to dynamically add a class to a div based on the id of a field in an object. However, my code doesn't seem to be working as expected. Can someone help me debug this? <ng-container *ngFor="let item of cards"> <d ...

Error in Module Building: The path argument must be a string type. A different type was received, which caused the build to fail

I recently updated my Vuetify version from 1.5 to the latest 2.3.10. However, when trying to run the webpack server, I encountered this error message. Even after adding yarn add sass -D, the issue persists. Can someone please assist me in resolving this pr ...

Is it possible to generate multiple modal windows with similar designs but varying content?

I am facing a challenge with 140 link items that are supposed to trigger a modal window displaying a user profile for each link. The issue is that each user profile contains unique elements such as three images, a profile picture, text paragraph, and socia ...

The checkbox generated from the JSON is failing to display the alert when it is clicked

I have been trying to pass checkbox input from JSON into HTML. When I click on the checkbox, an alert should pop up, but it's not working. Here is my code: $aroundCheck='<div id="content">'; foreach ($checkLocation as $checkLocation) ...

Retrieve all the values from a form with identical names using angularjs

I have a form with two text boxes, one for entering a name and the other for an email. There is also a button to add a new row with these two text boxes. I am attempting to retrieve the values of Name and Email using AngularJS, but I am new to Angular. Be ...

Enhance your property by adding the isDirty feature

Managing changes to properties of classes in TypeScript can be optimized by tracking only the fields that have actually changed. Instead of using an array to keep track of property changes, I am exploring the idea of implementing an isDirty check. By incor ...

The Ajax call failed to connect with the matching JSON file

<!DOCTYPE html> <html> <body> <p id="demo"></p> <script <script> function launch_program(){ var xml=new XMLHttpRequest(); var url="student.json"; xml.open("GET", url, true); xml.send(); xml.onreadystatechange=fun ...

Discover a foolproof method for effortlessly examining an flv or mp4 file embedded within a webpage simply by

I've encountered a challenge with JavaScript. I can successfully check a flash object in a webpage when hovering over it, but I'm unsure how to achieve the same for flv or mp4 objects when either hovering over or moving away from them. Currently ...

Electron Web Workers do not have compatibility with NodeJS modules

I'm currently working on a desktop application using Electron paired with ReactJS. From the initial renderer process, I create a hidden BrowserWindow to launch another renderer process. Within this new renderer process, I set up a web worker that wil ...

Automated user roster refresh

I have an online user list that is dynamically generated using a SQL query on a database table. How can I implement real-time updates to the webpage when a new user logs in? What specific code do I need to include for this functionality? Appreciate any g ...

Tips for transferring information from a cshtml view to a Vue.js application and further into a Vue component

As a beginner in Vue.js, I am exploring the process of passing data from a cshtml view to a Vue app, then transmitting it further to a Vue component within the app for rendering. In my attempt to pass the data, I decided to use a data attribute within the ...

Guide to displaying a loading image when selecting an item from a dropdown menu using JavaScript

When using three drop-down lists and performing an AJAX call on each dropdown list's onclick function, I encountered a delay in loading the data. To address this issue, I attempted to display a loading image while processing the AJAX call. <form ...

The Vuetify theme seems to be getting overlooked

I recently created a file in my plugins directory with the following code snippet: import Vue from "vue"; import Vuetify from "vuetify/lib/framework"; Vue.use(Vuetify); export default new Vuetify({ theme: { themes: { light ...

Extract the "_id" value from the array in the v-for loop and then store and reuse it in the data object // using vue-cli

Currently, I am iterating through [postArray] to retrieve various posts, each of which has its own unique "_id". My goal is to utilize this "_id" to add likes to the corresponding post. This is the v-for loop I am using: <div class="posts" v- ...