Embed Vue component into dynamically added element

While working on a Chrome extension, I initially used jQuery but due to some reactivity issues, I had to switch to Vuejs.

When I bind Vue to a random div, the content inside that div gets removed automatically.

To work around this issue, I tried appending a new element and using that instead. However, Vue seemed unable to locate it.


  let el = document.createElement('div');
  el.style.cssText = 'position:fixed;top:0;left:0;';
  el.id = '#random12345';
  document.body.appendChild(el);
  setTimeout(function () {
    const app = new Vue({
      el: "#random12345",
      data: {},
      render: h => h('some-component')
    });
  }, 3000);

But I consistently encountered an error message stating: [Vue warn]: Cannot find element: #random12345

Answer №1

#uniqueABCDE selector signifies that it searches for an element with id attribute matching uniqueABCDE.

The correct code should be:

el.id = 'random12345';

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

Getting a specific element from an Ajax response may involve using JavaScript methods to target the desired

Within my PHP file, there are multiple HTML elements that I am fetching in an AJAX response. Currently, all these HTML elements are being returned in my drop area. How can I adjust the code to only retrieve a specific element, such as an image, like so: P ...

A variety of personalized Vimeo play buttons

Recently, I stumbled upon a genius solution by Chris Coyier for creating custom Vimeo play buttons. It worked perfectly for my needs, but now I'm facing a challenge - how to make it function with multiple videos on the same page. I tried swapping out ...

Rapid processing of JavaScript upon page load

I recently implemented a dark mode feature on my WordPress site. Here are the four modes I included: 1- Automatically based on user's system settings 2- Light mode 3- Semi-lit mode 4- Dark mode The implementation is in place and functioning perf ...

What sets apart the $ and $() functions in jQuery?

After reviewing the jQuery API, I noticed that $() represents a collection of matched elements. However, I am curious about the significance of $. An example from the imagesLoaded library is provided below. if ( $ ) { $.fn.imagesLoaded = function( opt ...

What steps should be taken to ensure that my nodeJS server can maintain the identity of a specific user?

Currently, I am in the process of building a mobile application that utilizes Flutter for the front-end and NodeJS for the back-end. Progress has been steady, but I have hit a roadblock while trying to incorporate a lottery feature. The idea is for the se ...

Utilize Vue.js to incorporate an external JavaScript file into your project

Currently, I am utilizing Vue.js 2.0 and facing an issue with referencing an external JavaScript file in my project. The index.html file contains the following script: <script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfro ...

What is the most efficient method to import multiple MaterialUI components using a shared namespace without requiring the entire library to be imported

In order to prevent name mixing with other libraries, I want my MaterialUI components to be under the same namespace. For example, ensuring that <Box> references <MaterialUI.Box> and not <SomeOtherLibrary.Box>. Although it seems like a si ...

The functionality of Vue 3 directive handler does not behave in the same way as standard

I have implemented a directive but I am facing an issue with the "executed" handler: Here is the code for creating the directive: vueApp.directive('click-outside', { beforeMount(el, binding, vnode) { el.clickOutsideEve ...

How can you achieve div scrolling in React by simply dragging the mouse?

I'm currently exploring options for scrolling through a div using mouse drag, but I haven't come across anything particularly helpful. Specifically, I'm trying to replicate the functionality found in Trello where you can horizontally scroll ...

Retrieving information from a child component in Vue.js

I've been grappling with retrieving data from a child component using Vue.js. In my parent component, I need to display this data which is selectable in a Bootstrap table within the child component. Here's what I've done so far: Parent compo ...

Combine the serialized form data along with an array and post them together

I am encountering difficulties with sending the form through ajax. Along with the information input by the user, I also need to include an array of objects in the data being sent. AJAX POST: submitHandler: function (form) { $.ajax({ ...

What could be causing the child nodes of a particular class to not inherit the specified style?

When dynamically adding div child nodes to a search field, I do it like this: <div id="recommand" class="recommand"></div> data.result.forEach(function(entry) { let cont: rcommand; cont.username = entry[0]; const x = ...

Tips for creating multiple popups using a single line of JavaScript code

I am new to JavaScript and I am attempting to create a popup. However, I am facing an issue in opening two divs with a single line of JavaScript code. Only one div opens while the other remains closed despite trying various solutions found on this website. ...

Tips for creating a mandatory textarea input field

It's pretty straightforward - I have a textarea that is set to required, but it only alerts the user if you actually click inside the text area. If you try to submit without clicking inside, it won't prompt the alert. Take a look at this Fiddle ...

Using Jquery and css to toggle and display active menu when clicked

I am trying to create a jQuery dropdown menu similar to the Facebook notification menu. However, I am encountering an issue with the JavaScript code. Here is my JSFiddle example. The problem arises when I click on the menu; it opens with an icon, similar ...

:host background color may be missing, but the font size has been boosted?

Check out this demo where the CSS is applied to the :host element or <hello>. The font size increases but the background color remains unchanged. What do you think? styles: [` :host { font-size: 2rem; background-color: yellow; }`] }) ...

The Vue instance seems to be unable to recognize the shims-vue.d.ts file

I encountered an issue with my Vue file. Here is the code snippet: import Vue from 'vue'; import VueRouter from 'vue-router'; export default Vue.extend({ name: 'MyComponentsName', methods: { doRedirect() { this. ...

Guide on validating an email through a 6-digit code using Flutter, Node.js, and MongoDB

My goal is to create a registration process where users enter their email and password on a screen. After clicking "register", they should receive an email with a random 6-digit code for verification on the next page. I have everything set up, but I' ...

Make sure the checkbox is selected when the page initially loads, and if the page is reloaded, it should

When the page loads, I need a group of checkboxes to be pre-checked. I have an onload script that automatically checks the boxes, but when I uncheck them and reload the page, they remain checked. How can I make the checkboxes remember their last state? T ...

Issue with JQueryUI Dialog auto width not accounting for vertical scrollbar

My JQueryUI Dialog has the width property set to 'auto'. Everything functions properly except in situations where the content exceeds the height of the dialog: A vertical scrollbar appears, but it disrupts the layout of the content within the dia ...