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:https://i.sstatic.net/e0ueE.png

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

Is it possible to calculate a variable within a dataset using existing data as a reference point?

Is there a way to dynamically compute some of the data variables in a Vue instance by referencing other variables and tracking their changes? new Vue({ el: '#root', data: { x: 1, y: x + 1 } }) <script src="https://cdnjs.cloudf ...

javascriptvue.js

Ensuring Consistency of Values Between Child and Parent Components

Is there a way to ensure that the value of submitted in the child component always matches the value of submitted in the parent component? Appreciate any help! @Component({ selector: 'child-cmp', template: ` child:{{submitted}} ...

typescriptangular

Issues with loading NextJS/Ant-design styles and JS bundles are causing delays in the staging environment

Hey there lovely folks, I'm in need of assistance with my NextJS and Ant-design application. The current issue is only occurring on the stagging & production environment, I am unable to replicate it locally, even by running: npm run dev or npm r ...

reactjstypescriptnext.jsantd

Error 404 on Nuxt.js routes when using IISNODE in Internet Information Services

Currently attempting to host a demo of nuxt.js and express.js on IIS with iisnode. Unfortunately, I am encountering 404 errors for the nuxt page routes, while the express API routes are functioning correctly. The setup involves allowing express to manage ...

expressiisvue.jsiisnodenuxt.js

Issue with posting data to a JSON file using Vue and axios

I am encountering an issue with axis posting to a local .json file. The error I am receiving is: POST http://localhost:8080/todolist.json 404 (Not Found) TodoListEditor.vue?b9d6:110 Error: Request failed with status code 404 at createError (createErr ...

jsonvue.jslocalhosthttp-status-code-404axios

Conceal the Multipart Option Form Value in VueJS

Currently, I am working on a Vue template that includes a multiple select dropdown element. However, I am facing an issue where the options from a previous selection are still visible in the form even after making a new selection. <select v-model="newP ...

vue.jsvuejs2

Dealing with GraphQL mutation errors without relying on the Apollo onError() function

When managing access to an API call server-side, I am throwing a 403 Forbidden error. While trying to catch the GraphQL error for a mutation, I experimented with various methods. (Method #1 successfully catches errors for useQuery()) const [m, { error }] ...

javascripttypescriptreact-nativegraphqlapollo

Using Docker to containerize a Vue single-page application, with the flexibility to switch API URLs based on the environment

I have a dockerized Vue.js application that communicates with an API hosted on a java backend. The API URL varies depending on the environment - it's app.example.com/api in production, staging.example.com/api in staging, and localhost:8081 when runnin ...

dockervue.jsdevops

Transferring dynamic data to an Angular component's controller

Here's what I currently have: <div *ngFor="let career of careers"> <label>{{career.name}}</label> <input type="checkbox" attr.id="{{career.id}}" (change)="doSomethingWithId($event.target)" </div> This is the TypeSc ...

angulartypescript

What is the recommended TypeScript type to be returned from a GraphQL resolver when using ESLint?

Repository Link https://github.com/inspiraller/apollo-typescript The code is functioning correctly, however, Eslint typescript is raising complaints. An eslint error occurs on the following code block: Query: { players: () => players } Miss ...

typescriptgraphqleslintapollo-server

The seamless union of Vuestic with Typescript

Seeking advice on integrating Typescript into a Vuestic project as a newcomer to Vue and Vuestic. How can I achieve this successfully? Successfully set up a new project using Vuestic CLI with the following commands: vuestic testproj npm install & ...

typescriptvue.jsvuesticvuestic-admin

Document: include checksum in HTML

I have a set of three files. The file named loader.js is responsible for creating an iframe that loads another file called content.html, which in turn loads content.js. I have made loader.js publicly available so that other users can include it on their ow ...

javascripttypescriptnpmbuildparceljs

Learn how to read the contents of a v-textarea line by line with the help of JavaScript in V

In my v-textarea component, I have set the following properties: <v-textarea v-model="pmidInput" name="input-PMID" ...

vue.jsvuetify.js

Can you explain how to utilize multiple spread props within a React component?

I'm currently working in TypeScript and I have a situation where I need to pass two objects as props to my React component. Through my research, I found out that I can do this by writing: <MyComponent {...obj1} {...obj2} /> However, I'm fa ...

reactjstypescript

Is it possible to utilize Nuxt exclusively as a Single Page Application (SPA)?

My current tech stack includes Angular and Node.js. I have dabbled with Vue on a few simple projects, and recently came across Nuxt3 in some videos. I'm curious to know if Nuxt3 supports single page applications (SPAs) with a Node.js API integration. ...

vue.jsnuxt.jssingle-page-applicationnuxtjs3

The error occurred in Commands.ts for Cypress, stating that the argument '"login"' cannot be assigned to the parameter of type 'keyof Chainable<any>))`

Attempting to simplify repetitive actions by utilizing commands.ts, such as requesting email and password. However, upon trying to implement this, I encounter an error for the login (Argument of type '"login"' is not assignable to parameter of t ...

javascripttypescriptcypress

Typescript: Determine when a property should be included depending on the value of another property

Having some difficulty with Typescript and React. Specifically, I am trying to enforce a type requirement for the interface Car where the property colorId is only required if the carColor is set to 'blue'. Otherwise, it should not be included in ...

javascriptreactjstypescript

Retrieve the value of the following object in a loop - Vue JS

I needed to verify whether a specific property of an object matches the property of the next object in an array of objects while looping through using a v-for loop. Here's an example JSON object: [ { Date: '21-July-2017', ...}, { Date: ...

vue.jsvuejs2v-for

No search results found for Mongoose text search query

Despite using Mongoose 5.7.8 for my app, the text search feature is not yielding any results. Below is a schema/model example: import mongoose, { Document, Schema } from 'mongoose'; import { Moment } from 'moment'; import { IUser } fr ...

javascriptnode.jsmongodbtypescriptmongoose

Modify the perspective with a computed property

In my ViewControls component, I have switchControls that allow me to determine the index of a clicked button. For example, if I click the first button, the snippetValue will be 0 and so on. <template> <SwitchControls v-model="snippetValue&quo ...

vue.jsvuejs3