How can I pass a DOM element as a prop in Vue 3?

As someone who is brand new to Vue, I'm exploring the possibilities. Although it's not something I typically do, I believe achieving a similar outcome in React + JSX (untested) could look like this:

render() {
  const el = <p>Blah <a href="https://example.com">bloop</a> bleh</p>
  return (
    <div>
      <CustomReactComponent someProp={el}
    </div>
  )
}

In this scenario, CustomReactComponent would be responsible for rendering the element based on this.props.someProp.

Is there a way to achieve similar functionality using Vue?


For those who are curious, my requirement is akin to the untested React example provided above. I am looking to have certain parent components of a specific small component pass text content to be displayed within it. Additionally, I want the ability to include links wherever necessary, hence I require the presence of <a> tags. My initial thought was to accomplish this by passing a complete <p> or <span> element as a prop.

Any alternative suggestions are appreciated!

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

Add to an array the recently created span element which was inputted through text in AngularJS

Having some difficulty controlling an array object with a list of span values using a watcher in Angularjs. The current setup works partially - when I input span elements, an array is automatically created for each span. When I remove a span element, the ...

Steps to Hide a Material-UI FilledInput

Trying to format a FilledInput Material-ui component to show currency using the following package: https://www.npmjs.com/package/react-currency-format Various attempts have been made, but none seem to be successful. A codesandbox showcasing the issue has ...

Guide on enabling users to input slide number and URL address to load content using Ajax

Is there a way to customize the number of slides in a slider and choose which content is loaded into each slide using AJAX calls in jQuery? Currently, my slider uses the jQuery .load() method to dynamically load content into each slide when it becomes vis ...

"The AJAX response returned a status code of 200, however, the PHP script being executed on the XAMPP localhost did not provide

The HTML code initiates a localhost function called getNodes which returns JSON data that is verified by JSON lint. However, when the same function is invoked using AJAX from a JavaScript file, a 200 response code is received without any response data. I h ...

Identifying functions that contain dots in their names using JSHint

While running jshint on a JavaScript file, I encountered functions with dots in their names for namespacing purposes. Specifically, within the d3 library, there is a significant portion of code that resembles: d3.select("something") Should I simply disab ...

Storing the DOM in a Variable

I have saved the response of an XMLHttpRequest() into a variable from a specific website, let's say yahoo.com. How can I retrieve the values of the DOM content using either getElementById or getElementsByName on this variable? For instance: var dump ...

Upon attempting to retrieve a package version, NPM responds with an error stating "bash command not found."

I recently set up my project with a package.json file that includes the nodemon package among others. When I run #npm list --depth 0 in the terminal, this is what I see: ├─┬ [email protected] However, when I try to check the version of nodemo ...

Extract information from a webpage using Selenium WebDriver

Currently, I am working on mastering Selenium, but I have hit a roadblock that I need assistance with. My task is to gather all the betting information for games from the following link and store it into an array. Given my limited experience with HTML an ...

What is the best way to organize React components/modules in order to effectively separate the UI?

Currently, I have developed three key components for a dashboard UI project in React. These components include a sidebar, top navigation bar, and a content container. As someone who is new to React after working with Angular, I am now seeking advice on how ...

Leveraging Variables within my .env Configuration

Does anyone have suggestions on how to set variables in my environment files? Website_Base_URL=https://${websiteId}.dev.net/api In the code, I have: websiteId = 55; and I would like to use config.get('Website_Base_URL'); to retrieve the compl ...

Generating distinctive content within the confines of the Selenium WebDriver

Is there a way to generate a unique username value for the signup page username textbox using selenium webdriver instead of hardcoding it? For example: driver.findElement(By.id("username")).sendKeys("Pinklin") ; When "Pinklin" is hardcoded, running the ...

Is it possible for me to move props object deconstruction into a separate module?

Here is my scenario: I have two React components that share 90% of the same props data, but display different HTML structures. I would like to avoid duplicating variable declarations in both component files. Is there a way to extract the common props des ...

JavaScript vanilla can be difficult to grasp, especially when it comes to

I'm experiencing a delay in displaying and hiding the mobile menu and table of contents section on my website when viewed on a mobile device. I'm using vanilla JavaScript to add and remove classes, but it's taking about one second for the me ...

Tips for enabling mouse wheel zoom on a three.js scene

I have a straightforward three.js graphic that I wanted to make zoomable by using the mouse wheel. I attempted to implement solutions from this and this question in order to achieve this feature. Ideally, I want users to be able to zoom in or out of the gr ...

Extract the image URL from a JSON API

I'm struggling to retrieve an image URL from a Wordpress JSON API and populate an image tag with it. Below is the code that isn't working for me: $(document).ready(function() { $.getJSON('http://interelgroup.com/api/get_post/?post_id=46 ...

jQuery can be used to obtain the label for a checkbox with a particular value

Currently, I am facing an issue with retrieving the label for a checkbox using jQuery. Let me provide you with the relevant HTML code: <div class="checkbox"> <label><input type="checkbox" name="cb_type[]" value="sold" >Sold</label ...

What causes the other array to be affected when one is changed?

Take a look at this snippet of JavaScript code: var x = [1, 2, 3], y = x; y[1] = 3; x; // x === [1, 3, 3] Why does this happen? Why is the value of "x" changing when I update "y[1]"? I tried it in both Firefox and Chrome and got the same result. Th ...

How can we deliver pure JS, HTML, and CSS content without relying on static HTML pages?

Looking to create a fast app prototype without using React or Vue? I'd like to avoid simply making an html and js file imported within it. Can npm packages, SCSS be used while programming vanilla Javascript minus a framework? ...

Attempting to display a v-data-table inside a v-dialog results in rendering issues

I'm currently working on incorporating a v-data-table in a v-dialog <v-dialog max-width = '600px' v-model = 'dialog'> <v-card> <v-card-title> <span class = "headline"> Reconstru ...

Load elements beforehand without displaying them using a div

In order to efficiently manipulate my Elements using jQuery and other methods, I am exploring the idea of preloading them all first. One approach I have considered is creating a div with CSS display set to none, and placing all the elements I need for my w ...