Displaying HTML content fetched from a database in Vue

I am currently developing a blog application that utilizes Vue.js for the frontend and Node.js for the backend.

For the content creation part of the blog, I have implemented a rich text editor called vue2-editor on the frontend. The goal is to store this content in a MySQL database and then retrieve it later. However, the issue I'm facing is that the content stored in the database is being saved as plain HTML.

<p><strong>This is Blog Heading</strong></p><p><br></p><p><u>This is underlined</u></p><p><br></p><p>This is start of the paragraph</p>

Upon retrieval from the database, the content is displayed as a string instead of rendered HTML.

Is there a solution or workaround to properly display the HTML content?

mysqlvue.jsvuejs2vue-componentrich-text-editor

Answer №1

Make sure to utilize the v-html attribute when you want to display HTML code instead of a string.

If you need more information, check out this link:

https://v2.vuejs.org/v2/guide/syntax.html

Here's an example for reference:

<div v-html="htmlFromDb" />

Answer №2

Offering a solution based on my expertise, I hope it proves helpful to you. Take a look at the code snippet below: 

<p><strong>This is Blog Heading</strong></p>
<p><br></p>
<p><u>This is underlined</u></p>
<p><br></p>
<p>This is start of the paragraph</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

having difficulty incorporating if/else statements in a SQL query

I'm having trouble running this query: $sql = "update customers set activation_code='$reg' WHERE c_number='$users1' and password='$id'"; $result = mysql_query($sql); if (mysql_error()) { ?> <script type=tex ...

phpmysql

Troubleshooting Vue.js and Laravel: Having trouble loading new image files, while the older ones load just fine

Currently, I am working on a project that involves Vue.js and Laravel. In this setup, Vue is located inside the resources/js directory of the Laravel project. My current issue revolves around loading an image from the resources/js/assets directory. While ...

javascripthtmllaravelvue.js

I am encountering an issue with my Laravel Vue application where it is not able to delete a record. Should I consider binding my button to ensure it redirects to the controller

Hello, I am facing an issue while working on my app that involves a simple CRUD operation. The problem is that the code does not delete a record when I click the delete button. I am new to Laravel and Vue, so I am still getting familiar with how these two ...

phplaravelvue.js

What could be causing my Nuxt/vue pages to be blocked by the robot.txt file?

This isn't a query about SEO best practices, but rather a question on correctly setting up config.js and script sections in VUE After building my site with Vue/Nuxt, which was previously easy for me with Angular, I am now encountering errors. The ma ...

vue.jsseonuxt.jsrobots.txtgoogle-search-console

Where should I place these props for this specific component?

I have tried the suggestions provided in the answers, but it seems like the component is not working as expected. Currently, I am implementing this component from https://www.npmjs.com/package/@mtcmedia/vue-tabs-accordion The functionality works fine, b ...

vue.js

How can we automatically disable premium memberships in PHP and MySQL after a set period of time?

I recently discovered how to implement PayPal IPN for upgrading users to a premium membership upon payment. After clicking on the upgrade account button, users are directed to PayPal for payment and then the IPN system updates the database to reflect their ...

phpmysqltimecountdown

Unable to retrieve Vuex state within a function

Currently, I am developing a Laravel+Vue application where Vuex is used for state management. While working on form validation, everything seems to be progressing smoothly except for one particular issue that has me stuck. The problem arises when I attempt ...

javascriptvue.jsvuex

Exploring the functionality of publicRuntimeConfig in Nuxt plugins

I have developed a new Vue socket.io plugin called @/plugins/socket-io.js import Vue from 'vue' import VueSocketIO from 'vue-socket.io' Vue.use( new VueSocketIO({ debug: true, connection: process.env.SOCKET_IO_CONNECTION, } ...

vue.jsnuxt.js

Utilizing the layout of nuxt-child over the parent's design

I am currently exploring the world of Nested Routes and <nuxt-child> while working with layouts in nuxt.js. The parent component is housing the <nuxt-child>, giving us a view into the subroutes of the parent. My goal is to have Nuxt utilize t ...

vue.jsnuxt.js

What are the benefits of using CouchDB for login functionality, but encountering an empty CouchDB session while utilizing Vue.js and P

Utilizing Vusjs, pouchdb-browser, CouchDB, and pouchdb-authentication I am attempting to verify if a session is active for offline stay logged in. Upon logging in with db.logIn from pouchdb-authentication: response: {ok: true, name: "01HAYJ", ...

vue.jsauthenticationcouchdbpouchdb

Cycle through images that are dynamically generated from retrieved data

Although I have a functional solution for this issue, it feels messy and not the ideal way to handle it in Vue. The challenge is fetching data from a backend related to a "Vendor" entity, which includes photos that need to be displayed on the page. The go ...

javascriptvue.js

Tips for avoiding the automatic transition to the next slide in SwiperJS

How can I prevent the next button click in swiper based on my custom logic? I am using the swiperjs library within a Vue project and I need to stop users from swiping or clicking the next button to move to the next slide depending on certain conditions de ...

javascriptvue.jsswiper.js

With Vue 3 Pinia, values fetched from an API within a Pinia store cannot be statically assigned; they will always be reactive

I have a frontend built with vue3 and using pinia as the store. I am setting it up as shown below: export const useShopStore = defineStore( "shop", () => { const state = reactive({ data: { fruits: [], owners: [] ...

vue.jsvuejs3pinia

The feature of Nuxt 3's tsconfig path seems to be malfunctioning when accessed from the

Take a look at my file structure below -shared --foo.ts -web-ui (nuxt project) --pages --index.vue --index.ts --tsconfig.json This is the tsconfig for my nuxt setup. { // https://v3.nuxtjs.org/concepts/typescript "exte ...

typescriptvue.jsvitetsconfignuxtjs3

Issue with Javascript form submission leading to incorrect outcomes

When setting the form action to a text retrieved from the database with an ID, I encountered a problem where it always displays the first ID even when clicking on text holding ID=2. Upon checking the page source, the correct IDs are shown for all texts. B ...

phpjavascriptmysqlcodeigniter

Having trouble reaching the link using my controller in a jhipster application

I've been working on a project with jhipster and recently created a test controller to check if everything is functioning properly. Take a look at my test controller code: @RestController @Configuration public class TestController { private stat ...

javaspring-bootvue.jsspring-securityjhipster

Organize the strings by first sorting them alphabetically based on the first letter and then by length starting from the longest. Next, arrange the strings in ascending

After experimenting and seeking help on stackoverflow, I have managed to sort an array of objects based on the 'plate' key using the following function: sort(function(a, b) { return a.plate.toLowerCase() > b.plate.toLowerCase() ? a.pla ...

javascriptarrayssortingvuejs2

Issue encountered when integrating vue2-google-maps into a project using vue.js and Laravel 5.6.12

I am currently utilizing Laravel 5.6.12 in combination with vue.js I am attempting to integrate Google Maps using the following GitHub link I am adhering to the instructions provided in the aforementioned link, as follows. Installation npm install vue2 ...

google-maps-api-3vue.jslaravel-5.6

The property number will have no effect on the time

Currently, I am in the process of developing an audio player that includes essential functions such as backward, play, and forward buttons. Strangely enough, the backward function operates perfectly fine, but the forward button is not functioning properly ...

javascriptvue.jsvuejs2vuejs3

Deciding on excluding empty key:value pairs from an object for various filtering needs

One of the features in my app allows users to filter results by "blood group" and "city", along with other areas. The information is retrieved from a database using Axios for Vuejs, incorporating query strings within the URL. For example: http://example.co ...

javascriptlaravelvue.jsvuejs2