Is it possible to include HTML elements like <href> in Vue data?

My collection of data strings looks something like this:

    data(){
      return(){
        {name:"example", title:"exampleTitle", desc:"exampleDescription exampleDescription ....."},
        {name:"example2", title:"example2Title", desc:"exampleDescription2 exampleDescription2....."}


      }

    }

I am looking to format certain parts of the "desc" strings as bold or a link. I attempted to achieve this with the following code snippet:

        {name:"example", title:"exampleTitle", desc:"exampleDescription exampleDescription ....."},   
        {name:"example2", title:"example2Title", desc:"<p> <b>exampleDescription</b> exampleDescription..... </p>
 

However, I received an error message indicating that I need to use JSX or TypeScript. Despite my search efforts, I couldn't find any relevant information on how to proceed. Is there a way I can accomplish this task using these technologies? Or are there alternative methods available?

Answer №1

If you want to include HTML in your code, make sure to enclose it in quotes just like any other string:

{name:"example", title:"exampleTitle", desc:"exampleDesc exampleDesc ....."},
{name:"example2", title:"example2Title", desc: "<p> <b>exampleDesc</b> exampleDesc..... </p>"}

To incorporate data with HTML into your template, use v-html like this:

<span v-html="desc"></span>

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 execute npm run dev using Nodejs alone?

I am currently developing my website using Laravel and VueJS on my local computer. I have no issues running npm run dev on my computer. However, when I push the changes to Github, a webhook triggers a script on my hosting server (OVH) to update the live w ...

A declaration file for the 'vuelidate' module could not be located

When I was following the installation instructions for Vuelidate in Vuejs (), I encountered a warning message at this line: import Vuelidate from 'vuelidate' The warning states: There seems to be an issue with finding a declaration file for t ...

Error: A stream was expected, but you provided 'undefined'. Please provide either an Observable, Promise, Array, or Iterable instead

I'm encountering an error while trying to catch errors in my Ionic-based application with Angular. In the create() method, I am attempting to create a new User. If the username already exists, I receive a response from the backend, but my method thro ...

Exploring Child Types in Typescript and JSX minus the React framework

It seems like there's a missing piece of the puzzle that I can't quite figure out. Despite going through the documentation on JSX in non-React settings, I'm still unable to spot my mistake. Let's examine the following code: /** @jsx pra ...

Despite using Enzyme to locate a component again, the expected prop value is still not being returned

Two components are involved here - a modal and a button that is meant to open the modal by setting its isOpen prop to true. The initial state of the modal is set to false, but when the button is clicked, it should change to true. While everything works fi ...

Vue JS - Unable to locate module (datepicker)

Today marks my first time delving into the world of vue.js, and as expected, I've encountered an error that has me stumped. I recently incorporated the v-md-date-range-picker module into my project: (. The setup instructions provided me with the f ...

Next.js Pre-rendering Issue: Error encountered when trying to access properties of a null object

Using Next.js for a React application (full code available here.) Encountering an unusual error while running next build, showing errors related to prerendering on five pages: spenc@WhiteBoxu:~/workout-tracker$ next build info - Loaded env from /home/spe ...

While developing my Vue.js project, I encountered an unexpected issue

I started a fresh project using Vue Js and encountered an issue. Code snippet: export default { name: 'welcome', mounted: function() { $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", ...

Error: Attempting to access the 'tokenType' property of an undefined object is not allowed

We encountered an error while attempting to embed a report using the Power BI Angular library. TypeError: Cannot read properties of undefined (reading 'tokenType') at isSaaSEmbedWithAADToken (reportEmbed?navContentPaneEnabled=false&uid=am ...

Avoid including any null or undefined values within a JSON object in order to successfully utilize the Object.keys function

My JSON data structure appears as follows: { 'total_count': 6, 'incomplete_results': false, 'items': [ { 'url': 'https://api.github.com/repos/Samhot/GenIHM/issues/2', 'repository_url' ...

switching the content of a button when it is clicked

I am currently using Angular 7 and I am trying to achieve a functionality where the text on a button changes every time it is clicked, toggling between 'login' and 'logout'. Below is the code snippet I have been working on: typescript ...

Clearing form data after submitting in Laravel using axiosIn Laravel, utilizing

When working on my Laravel app, I encountered an issue while submitting a form using Vue and Axios. Despite my attempts to clear the input field after submission, it doesn't seem to work. HTML: <form method="post" enctype="multipart/form-data" v- ...

The Axios API request is made, but fails to retrieve any data back to the client

I've been working on a feature in my VueJS app where I need to restrict page viewing of an Upload instance to only members of a specific Group. However, I'm facing an issue with retrieving the group information. Despite axios successfully hittin ...

I am having trouble getting Angular 6 to work with lowdb

I am currently in the process of developing an Electron app with Angular 6, utilizing lowdb as a local database. This is all very new to me and I am learning through trial and error. However, I seem to be encountering difficulty resolving the following er ...

What is the best way to organize JSON data?

This is my method of retrieving JSON data. "wrk_hours": [{"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Tuesday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Wednesday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": " ...

Is it possible to modify a portion of the zod schema object according to the value of a

My form consists of several fields and a switch component that toggles the visibility of certain parts of the form, as shown below: <Field name="field1" value={value1} /> <Field name="field2" value={value2} /> &l ...

Utilizing Interface Merging: Determining the Appropriate Instance Type for Field Types

I am in need of writing a definition file for an external library. I have augmented a class using interface merging and there are situations where a field of the library class is of the same type as the instance itself. Here is a snippet of demo code: // ...

Next.js encountered an error when trying to locate the 'net' module while working with PostgreSQL

I'm facing a challenge in my Next.js project while attempting to retrieve all records from a table. The error message I'm encountering is "Module not found: Can't resolve 'net'" with an import trace pointing to multiple files withi ...

Issues encountered while trying to integrate chessboard.js into a Vue application

I am facing an issue while trying to incorporate chessboard.js into my jetstream-vue application. Following the creation of the project, I executed the command npm install @chrisoakman/chessboardjs which successfully downloaded the package into my node_mod ...

Exploring the capabilities of Dynamic Route integration with Server Side components using Supabase in Next.js

export default async function Page({ searchParams, }: { searchParams?: { [key: string]: string | string[] | undefined }; }) { // const searchParams = useSearchParams(); const id = searchParams?.p ?? "aaa"; // default value is "1" ...