Menu
When I'm inside some method in vue commponent and want to use some dom manipulation (by jquery) I need to get DOM element coresponnding to my component (especially in case when I have many instances of my component on page - I need to 'work' separately on each of them - so I cannot detect DOM element using only jquery selector without tricks...)
921
Referencing DOM Elements in Vue # If we want to reference a DOM element, we can use the ref attribute in Vue. Vue can store references to DOM elements in a property called $ref . The first thing we have to do, is add a ref attribute to the element we want to reference in our Javascript.
The easiest way to access a single element in the DOM is by its unique ID. You can get an element by ID with the getElementById() method of the document object. In the Console, get the element and assign it to the demoId variable. Logging demoId to the console will return our entire HTML element.
Refs are Vue. js instance properties that are used to register or indicate a reference to HTML elements or child elements in the template of your application. If a ref attribute is added to an HTML element in your Vue template, you'll then be able to reference that element or even a child element in your Vue instance.
We can use querySelector to select an HTML element that returns the first element within the document that matches a specified selector. It can be used to set, obtain, modify, or delete properties of the selected element in Vue.
Just by this (in any method in "methods"):
let domElement = this.$el;
:)
But remember this is valid as long as your component is not a Fragment Instance i.e. it has a single root HTML tag
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With