CODEWITHSUNDEEP
vue.jsvuejs2
Rob
Rob

Reputation: 7121

Mount vuejs to DOM element with jQuery

I am making a chrome extension for a specific website and they don't have ID's so I am using jQuery to access the dom element via a complicated query.

When I read the instructions for VueJS it wants me to connect vue to the dom via el: '#app' what I am looking for is if I can do something similar to el: $('#app').find('li').last().

Upvotes: 2

Views: 570

Answers (2)

Denis Tsoi
Denis Tsoi

Reputation: 10414

I believe providing any css selector or html element should resolve this.

From https://v2.vuejs.org/v2/api/#el

Type: string | HTMLElement

Restriction: only respected in instance creation via new.

Details:

Provide the Vue instance an existing DOM element to mount on. It can be a CSS selector string or an actual HTMLElement.

After the instance is mounted, the resolved element will be accessible as vm.$el.

If this option is available at instantiation, the instance will immediately enter compilation; otherwise, the user will have to explicitly call vm.$mount() to manually start the compilation.

Therefore if we use the following css selector may be appropriate

el: "#app > li:last-of-type"

Upvotes: 2

gleam
gleam

Reputation: 870

You can use something like this:

el: $('#app').find('li').last()[0]

https://jsfiddle.net/3mujL7ac/

But Denis Tsoi answer is better.

Upvotes: 1

Related Questions