Get Vue Instance By Id

Posted on  by admin

Modified1 year, 8 months ago. I would like to get an outer Element in Vue, using getElementById():. This brings me an empty Element, but not a null - which suggests that the query was partially successful (something was found).

This is actually a POC for a more general problem I face: the ability to get an outer Element (say, a container div) from within a Vue component (this brings me a null, which the documentation says to be the response when the element was not found).

Is it possible, from within a Vue object or component, to query an outside Element present in the DOM? 4242 gold badges141141 silver badges273273 bronze badges.

273273 bronze badges. It is possible, as you can see. But be warned, that if you want something like this, your app is probably bad designed and you created entry poin for XSS attack.

user6748331user6748331. Here is a snippet accomplishing what I believe you want to do.

I modified your example to use classes since I wanted to avoid having two elements with the same id.I'm just using outerHTML to get the DOM element as a string and then rendering it using Vue's v-html.

11 gold badge1414 silver badges2121 bronze badges. 2121 bronze badges. I think your code is working now and you are getting dom in helloElement. Adding .innerHTML you will get the solution. Every Vue.js app is bootstrapped by creating a root Vue instance with the Vue constructor function:. A Vue instance is essentially a ViewModel as defined in the MVVM pattern, hence the variable name vm you will see throughout the docs.

When you instantiate a Vue instance, you need to pass in an options object which can contain options for data, template, element to mount on, methods, lifecycle callbacks and more. The full list of options can be found in the API reference. The Vue constructor can be extended to create reusable component constructors with pre-defined options:.

Although you can create extended instances imperatively, in most cases you will be registering a component constructor as a custom element and composing them in templates declaratively. We will talk about the component system in detail later.

Featured

Learn Vue.js today!

Take an online course and become an Vue.js champion!

For now, you just need to know that all Vue.js components are essentially extended Vue instances.

  • Each Vue instance proxies all the properties found in its data object:.
  • It should be noted that only these proxied properties are reactive.
  • If you attach a new property to the instance after it has been created, it will not trigger any view updates.
  • We will discuss the reactivity system in detail later.
  • In addition to data properties, Vue instances expose a number of useful instance properties and methods.