Tips for showcasing styled text in Vue using API data

I'm having trouble formatting text in Vue.

Within a component, I have a textarea that stores a string with backspaces, etc ... in an API like this:

A cellar but not only...\n\nWelcome to the Nature & Wine cellar, a true Ali-baba's cave for enthusiasts of oenological, spirituous, beer and gastronomic discoveries. Our motto: conviviality and simplicity, our point of honor: to provide you with happiness whether you are a novice or expert. We independently select our wines, beers and spirits by seeking authenticity, originality as well as an ethical commitment to respect for the environment and health.\n\nWine, beer and spirit tasting sessions are offered so that you can acquire the keys to understanding these wonderful products in a 100% convivial atmosphere guaranteed free of pedantry and snobbery.\n\n

When I retrieve and display this data in my template, there is an issue. The text does not include backspaces and displays incorrectly, like this:

To retrieve my text content, I am using the following:

<p>{{ findContent('60f5951649b96602c029af99') }}</p>

In this case, the findContent method returns the content as a String from an array.

Does anyone have any suggestions on how to properly display this text?

typescriptvue.js

Answer №1

Consider implementing the white-space:pre-wrap property for better formatting:

 <p style="white-space:pre-wrap">{{ retrieveContent('60f5951649b96602c029af99') }}</p>

Answer №2

To fix the issue, I included the styling : white-space: pre-wrap in the following manner :

<p style="white-space: pre-wrap">{{ locateContent('60f5951649b96602c029af99') }}</p>

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

Learning how to handle URLEncoded format in Vue JS

Seeking guidance on how to handle URL Encoded format in postman to send data to my Vue JS app. Using the encoded format shown below, what npm package should I utilize for this task? https://i.stack.imgur.com/sBkXi.png ...

javascriptvue.jsvuejs2vue-componentvuex

Tips for troubleshooting an external reactive variable

Whenever I work on my components, I always make sure to import state from './state' so that I can easily access a global state. Although it's not a cutting-edge state machine with mutations, it works perfectly for my small project. The stat ...

vue.jsvuejs3google-chrome-devtools

What could be causing the data in Vue Dev Tools to not update properly?

Can someone clarify why this scenario wouldn't function properly in Vue? HTML <div id="app"> <button v-on:click="isActive = !isActive">Click me</button> </div> JS vueApp = new Vue({ el: '#app', data: { ...

vue.jsvuejs2

Vue.js seems to be leading me down a long and steady path of progress at a snail

I've exhausted all efforts to resolve the file paths for Home and App. I even turned to AI to help me out, but still no luck. Code snippet from main.js in the src folder: import Home from '@views/Home.vue'; // Using alias import App from ...

javascriptfirebasevue.jsimporttailwind-css

Error: The function list.forEach does not exist within service.buildList [as project]

Today, I've been grappling with a challenging issue. As someone new to Typescript and Angular, I'm attempting to make a call to my backend API. However, when trying to populate an array for display, I keep encountering an error that says rawRegis ...

angulartypescriptapirest

The importation of TypeScript source modules is not compiled accurately in the distribution folder

Currently, I am working on a REST API in TypeScript with the following structure: ├── dist │ ├── index.js │ ├── library.js ├── src │ ├── index.ts │ ├── library.ts ├── node_modules ├── package. ...

typescriptmoduletsconfig

How can I manually listen to Angular 2 events on a dependency injected instance?

Assume I am working with a component: @Component({selector: 'todo-cmp'}) class TodoCmp { @Input() model; @Output() complete = new EventEmitter(); // TypeScript supports initializing fields onCompletedButton() { this.complete.next(); / ...

typescriptangular

Is it advisable to disregard mutation handlers in Vuex and consistently modify the store data directly?

When opting to directly mutate store data without using mutation handlers, you may find yourself writing significantly less code compared to following official guidelines that require computed properties and store mutations for nested state properties. In ...

vue.jsvuex

Identifying keystrokes and triggering audio in Vue.js

Utilizing vue.js, the code snippet provided enables sound playback upon each button click. I am curious about how one can detect a keyboard press event to play a sound when the DOM is ready rather than waiting for button clicks. For instance, triggering ...

javascriptvue.jsvuejs2

Transform the string property extracted from the API into a JSON object

When making a request to an API, the data returned to the front end is in the following format: { name: 'Fred', data: [{'name': '"10\\" x 45\\" Nice Shirts (2-pack)"', 'price' ...

javascriptangulartypescript

How can you use Vue.js @mouseover to target a specific <path> element within an <svg>?

Check out this Codepen example. I am working with an SVG map that contains various paths holding data. My goal is to retrieve the state name when hovering over a specific path. Currently, I have added an event listener to the svg element and am trying to ...

javascriptsvgvue.jsvuejs2vue-component

Select specific columns from an array using Typescript

I have a collection of objects and I'm looking for a way to empower the user to choose which attributes they want to import into the database. Is there a method to map and generate a separate array containing only the selected properties for insertion ...

javascripttypescript

actions with frontend routing for CRUD operations

Imagine you are creating a simple CRUD todo application. Whether you choose to use Angular, React, or Vue for routing, the setup will be similar: /todos => see all todos /todos/:id => view one todo by id /todos/:id/edit => edit one todo by id /todos/new ...

javascriptangularreactjsvue.js

Vue.js Dynamic Class Binding Fails to Update

As I delve into learning Vue Js, I have been working on a simple todo app. One interesting thing I've done is binding a class to my todo items based on whether todo.completed is true or not: <a v-bind:class="{iscomplete : todo.completed}& ...

javascriptvue.js

Copy data from JSON file to Vue2 Google Maps markers

I recently started working on a basic Vue project. The project involves integrating a Google Map using the vue2-google-maps package. Additionally, I have a JSON file (or data.php) containing the following information: { "locations": [ { "nam ...

javascriptgoogle-mapsvue.jsvuejs2

What might be causing AngularJS to fail to display values when using TypeScript?

I have designed the layout for my introduction page in a file called introduction.html. <div ng-controller="IntroductionCtrl"> <h1>{{hello}}</h1> <h2>{{title}}</h2> </div> The controller responsible for handling th ...

javascriptangularjstypescript

Unable to retrieve func from PropTypes

Struggling to understand why this specific import, among others, is not functioning properly: import * as React from 'react'; import TextField from '@material-ui/core/TextField'; import * as PropTypes from 'prop-types'; impor ...

reactjstypescriptmaterial-uireact-proptypes

Using v-model with the input type files in Vue.js allows for easy two

Is there a way to retrieve data from v-model array in an input type of "file" that allows multiple selections? <input type="file" multiple v-model="modFiles[index]"> <input type="file" multiple v-model="modFiles[index]"> <input type="file" ...

javascriptvue.jsv-model

What is the best way to save information from an axios promise into my database on separate lines?

Having a technical issue and seeking assistance: Currently, I am encountering an issue with my axios request to the database. After successfully retrieving the data, I aim to display it in a select form. However, the response is coming back as one continu ...

javascriptphpvue.js

Retrieve a static property from a specific type

I've encountered a dilemma with the code snippet below: class Action { public static DEPENDENCIES: (typeof Action)[] = []; public static MIN_USES: number | null = null; public static MAX_USES: number | null = null; } class SomeAction ext ...

typescript