How do I access an element from within the mounted function in a VueJS instance.
When I try the following, it tells me that the element is undefined. When I see the DOM it is there. Could this be a case where the element is not rendered before I try to reference it?
document.getElementsByName('transferDate_submit')[0].addEventListener("change",function(){});
You get a HTMLElement instance when you call your Vue.js instance with $el. Check the API.
Example
let allLinks = this.$el.querySelectorAll('a')
Alternatively, you could use a ref. This is a like a programmatic ID. Also check the API.
Example
<!-- vm.$refs.p will be the DOM node -->
<p ref="p">hello</p>
You can just use v-on:change or #change to bind your event listener so that you can avoid manipulating DOM element. Besides, Vue.js is to make you not to DOM as far as possible
Related
I have this:
<vue-markdown :source="content" v-on:rendered="afterRenderContent"></vue-markdown>
But when the method afterRenderContent is triggered the HTML elements are still not there.
I would like to do DOM HTML elements manipulation after the rendering but I can not. What is the proper way to wait until the DOM is ready?
I have tried to create a JSFiddle to reproduce the issue but looks like the CDN library is no loading properly:
https://jsfiddle.net/fguillen/5wamjxke/
Try moving your afterRenderContent method to the mounted lifecycle hook. You can only manipulate DOM elements after the component has been mounted.
mounted() {
this.afterRenderContent()
}
More on lifecycle methods here: https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram.
I notice you are also using some vanilla javascript, in your js fiddle, refs can be used in vue to access DOM elements in a more intuitive fashion .
<template>
<h1 ref="header-one">Header One</h1>
</template>
// in your component method or mounted hook
mounted() {
// access the header element
this.$refs['header-one']
}
EDIT: On a deeper dive Perhaps this might work, hooking into the mounted lifecycle method from a child component.
<vue-markdown :source="content" #hook:mounted="afterRenderContent"</vue-markdown>
Decent blog on how to use refs with vue here https://blog.logrocket.com/how-to-use-refs-to-access-your-application-dom-in-vue-js/
This is generated element by the plugin
<span class="leaflet-draw-draw-polyline">...</span>
I want to click on an element from some other part of the code.
How can I trigger click on this element without using ref on it?
Since the element seems to be completely out of a React component's scope, you could try either of the following:
create a React component and use refs
simply use document.getElementsByClassName() and .click()
I need to create an HTML element and provide it to some third-party component.
const testElement = <div ref='myself' className='test-label'>Hello (React) HTML element!</div>
thirdParty.addElement(testElement)
In the above I create the element with React, but passing it on as said raises an error, obviously because it's a React element and not a native DOM element.
Is there a way to convert testElement to a DOM element?
That said, I'm looking for a solution that will retain event handlers etc' associated with the component, so simply converting to HTML (ReactDOMServer.renderToString(testElement)) doesn't cut it.
-
Edit regarding duplicate:
The other one discusses about the HTML string. I need the object along with its event handlers etc'.
Try (ReactDOM.render(textElement, thirdParty))
https://facebook.github.io/react/docs/react-dom.html#render
I saw example code on https://github.com/lukemelia/jquery-ui-ember. Can some one tell me what is this.$()
you can see this on jquery-ui-ember-master\jquery-ui-ember-master\js\app.js
this.$() is a call of the $-method of your current objectscope.
this refers to your current object.
$ is a function of this.
() will call the function $ of this.
When you create a Component, in its code this.$() gives you a jQuery object reference, set to the element that was inserted into the dom by that Component (its outer tag, usually a div unless you told it otherwise). You can then use for example this.$('.myclass') to find the element with the class myclass within the section of HTML that is handled by that Component without having to specify an id attribute to find the correct set of elements.
This probably also applies to the Views, but you should be using a Component instead whenever possible.
As Leeft said this.$() will give you the reference to the jQuery object, but typically you should only want to get the reference to the jQuery object in didInsertElement where the component has been inserted into the DOM and you can do jQuery-UI stuff on the element.
I am trying to learn backbone. I understand that el is the element that is being acted on. If it isnt specified it is an empty div. I am creating a template inside my view and returning the view object. I am then rendering the view, but I dont understand why I chain el after the render function. Could someone please explain this line of code to me:
var view = new PersonView();
this.$('#family_list').children().append(view.render().el);
What is the el for? Thanks.
jQuery's .append() method expects a string of HTML or a DOM element to be appended to its calling node.
The .el property of the view is its bound DOM element. After calling view.render(), its .el DOM element property is passed into the jQuery .append() method, so jQuery .append() gets the updated (newly rendered) DOM node.
This is made possible because the .render() call must be returning this as suggested in the documentation. Its return value is therefore the view object itself1, and from that the .el can be referenced immediately.
1 Wikipedia: Fluent interfaces