Imagine transitioning from the jQuery realm. If you are working with a component myPlugin (jQuery plug-in, such as a tool that displays tooltips when hovering over specific DOM elements) it would be initialized like this:
$('.tooltipClass').myPlugin( { // options object here } )This code will target all elements with the class tooltipClass and apply the myPlugin on them.
In Vue.js, the process is different and the documentation may not provide clear guidance. You have
let x = new Vue({
el: '#app',
...
})
and according to the documentation:
Provide the Vue instance an existing DOM element to mount on. It can be a CSS selector string or an actual HTMLElement.
However, using a CSS selector could result in multiple elements (which doesn't work for multiple elements in Vue.js - as I've tested).
So, is there a way to replicate the jQuery initialization on multiple elements in Vue.js? (I understand one could do it manually outside of Vue.js)
The Vue.js documentation also lacks clarity on this issue. The version 3.x documentation omits the el option entirely, making it challenging to determine how to proceed in scenarios like the example mentioned above.
For instance, if you create a Vue.js popup component and need to display it when the user clicks on various buttons on the page. These buttons might have a role='popup' attribute in the HTML and trigger the customized popup (based on other data-xxx attributes, for example).
Such functionality is commonplace in modern JavaScript components. How can this be achieved with Vue.js?