Display HTML content within a <p> element using Vue framework

I'm encountering a bit of trouble and I was hoping someone could provide some assistance - Is it feasible to display HTML within a p tag in a .vue file?

Below is the HTML snippet:

<div class="content" :id="post['GUID']" ref="snapshot">
  <p id="summary">{{ post['Summary'] }}</p>
</div>

I am attempting to show the post['Summary'] as HTML, but the summary is currently showing up as plaintext like this:

<div class="ExternalClass394D5102B42B4570882C28EA620584C8"><div style="font-family&#58;Calibri, Arial, Helvetica, sans-serif;font-size&#58;11pt;color&#58;rgb(0, 0, 0);"><span style="color&#58;black;">​<p style="margin&#58;0in;font-size&#58;12pt;font-family&#58;&quot;Times New Roman&quot;, serif;"><i><span style="font-family&#58;&quot;Whitney Medium&quot;;color&#58;black;">Upping Your Game!</span></i>

How can I successfully render an HTML tag inside a p in a .vue file?

javascriptvue.js

Answer №1

Utilize the v-html directive in Vue.js to dynamically bind HTML content:

<p id="description" v-html="product['Description']"></p>


new Vue({
  el: '#container',
  data: () => ({
    product: {
      Description: `<div class="item-detail"><h1>Product Details</h1>`
    }
  }),
})
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70123456"> [email protected]</a>"></script>

<div id="container">
  <div v-html="product.Description"></div>
</div>

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

What is the best way to connect DataTable() to an already existing HTML <table> by utilizing Vue.js and populating it with data from an array using a v-for loop

Having trouble implementing DataTable features like search field and column sorting in Vue.js for my table. I have included the original datatable.min.js in the <head> section, and also added and called another custom.js file with the following cont ...

jqueryfirebasevue.jsfirebase-realtime-databasedatatable

Determine if a JavaScript code in my ASP view will be executed based on control from the controller

Working on an ASP.NET MVC4 system, I have a javascript code that displays a performance graph of students when the page loads. Here is the code for the graph: <script> window.onload = function () { var r = Raphael("holder"), ...

c#javascriptasp.netasp.net-mvcasp.net-mvc-4

Personalize the year heading for v-date-picker

I am utilizing a date picker with the Japanese locale <v-date-picker locale="ja-jp" ></v-date-picker> This feature allows for kanji characters to be displayed for week/month/year. However, I am curious ...

vue.jsvuetify.js

Adding a custom source to the script tag in Angular 7

I am currently using angular cli to develop my web application. The app is being built in the dist folder as of now. This is the index.html file: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Adm ...

javascripthtmlangularangular7

What is the best way to integrate the each_slice method in Rails views with React components

In my Parent component Monsters, I am rendering the Monster component. for each monster in @state.monsters React.createElement Monster, key: monster.id, monster: monster, team: @state.team... Within the monster: div className: 'col-md-4' ...

javascriptruby-on-railstwitter-bootstrapreactjsreact-rails

Setting up the react-ultimate-pagination component

I've been experimenting with the react-ultimate-pagination package available at: https://github.com/ultimate-pagination/react-ultimate-pagination My goal is to configure it in a way similar to their basic demo showcased here: https://codepen.io/dmytr ...

javascriptreactjspagination

determining the amount by which a div extends beyond the window's height

My challenge is to have a fixed div appear on top of various background images. The problem arises when this fixed div exceeds the height of the window, causing it not to scroll and resulting in lost content. I've attempted using max-height: 100% and ...

javascriptjquerycsshtmlheight

React - Triggering the onSubmit function of the parent component when a form is submitted

I am curious to understand the behavior I encountered. My React component consists of a Form (React Bootstrap) enclosed within a Modal (React Bootstrap). By mistake, I linked the onSubmit action to the outer Modal, and this function runs when the form is s ...

javascriptreactjsformsonsubmit

Confusion about Redirecting Windows

Using a JavaScript function, I am trying to redirect the window to a different webpage using this command: window.location.replace("/EluLander/doctor/doctordash.html"); The URL of the webpage when opened manually is: file:///C:/Users/Elijah%20Spiegel/D ...

javascripthtml

When React first fetches data and users move to chat with each other, the state value does not update

Recently, I started learning about React and Node.js as I dive into building a chat application. When a user is clicked for one-on-one chat, I retrieve records from the database using backend Node.js and also incorporate socket.io. In my Chat.js file: imp ...

javascriptnode.jsreactjssocket.io

Having trouble with ReactJS: Why is this.setState not working?

Hello there, I am currently learning ReactJS and struggling with an issue where I keep getting the error message "this.setState is not a function". constructor() { super(); this.state = { visible: false, navLinesShow: true }; ...

javascriptreactjssetstate

Is there a secure way to prevent user input from causing issues in a BigQuery node insert? Can the BigQuery.insert node library support parameterized queries for added security

I am seeking advice on how to securely insert user form data into BigQuery using the Google Cloud BigQuery library. Specifically, I am curious about the most effective methods for sanitizing, escaping, and cleaning the input data. Is it feasible to implem ...

javascriptsqlnode.jssecuritygoogle-bigquery

How can you detect a click event on a hidden DIV without capturing clicks on any elements within the DIV, especially when the DIV is not present in the Document Object Model (DOM)

Currently, I am facing an issue with my vanilla JavaScript event listener. It seems to be passing data correctly, except when I click on text that is formatted as bold or italicized. Below is the JavaScript code that I am testing: window.onclick = functio ...

javascripthtmlmouseevent

Node(Meteor) experiencing a memory leak due to setTimeout

I have encountered an unusual memory leak associated with the use of setTimeout. Every 15 seconds, I execute the following code using an async function that returns an array of promises (Promise.all). The code is supposed to run again 15 seconds after all ...

javascriptnode.jsmeteormemory-leakssettimeout

Finding documents that are not mentioned in a document from a separate collection

I am facing a challenge with two MongoDB models called session and unreadcount. Specifically, I need to retrieve the count of a particular session from another table. The structures of my models are as follows: var UnreadCountSchema = new mongoose.Schema({ ...

javascriptnode.jsmongodbmongoosemongodb-query

Issues with retrieving a result object from a MySQL query in NodeJS

I've been working on creating a logging system in NodeJS with a MySQL database. To establish the connection, I use the following code: const con = mysql.createConnection({ host : 'localhost', user : 'dbuser', passwor ...

javascriptmysqlnode.jsexpress

Exploring various ways to implement JavaScript animations for multiple traveling effects

I have a concept for an interactive bug animation. My idea involves having five bug images fly in from the side of the screen, bounce around randomly, and bounce off the edges. Each bug should have a unique starting position and direction. To kick things ...

javascriptanimationlogic

The sharpness of images may diminish when they are created on an HTML5 Canvas within Next JS

I am currently working on a project where users can upload an image onto an HTML5 canvas with fixed dimensions. The uploaded image can be dragged and resized using mouse input while preserving its aspect ratio. Below is the draw function I am using to achi ...

javascriptnext.jshtml5-canvasimage-quality

Calculator: Show individual digits once more following a calculation

After clicking the 'equal' button, the result is displayed. However, if I click another number, it doesn't clear the result. I want the result to stay when operation symbols like '+' or '/' are pressed. While working on t ...

javascriptjquery

Injecting classes on the fly within an ng-repeat loop

Struggling with an issue in Angular as a newcomer. I'm utilizing masonry to create a dynamic assortment of images and videos in an ng-repeat and want to randomize the sizing classes for images. For instance, if an item in the ng-repeat is an image, ap ...

javascriptangularjsangularjs-directiveangularjs-ng-repeat