Is it possible to attach a Vue component to more than one div element simultaneously?

Question

Is it possible to attach a Vue component to more than one div element simultaneously?

import Selector from '@components/contactSelector'
let vueInstance = new Vue({
  components: { Selector },
  data () {
    return {
      url: url,
      isFilter: false,
      type: 'external',
      selectedList: []
    }
  },
  render (h) {
    return h(Selector, { props: { url, selectedList: this.selectedList, maxHeight: '300px' } })
  }
})

I have an instance of Vue created above. Is it possible to render it on multiple divs? I have attempted to do so but it does not seem to work. Is there a way to mount it on multiple divs or is it intended to be mounted on a single div only? If anyone has knowledge about this, please provide assistance. Thank you.

vueInstance.$mount('#contactSelectorId')
vueInstance.$mount('#contactSelectorId2')

javascript vue.js vue-component

Answer 1

Answer №1

In my opinion, the desired outcome can be accomplished by establishing a root component that incorporates your component as a child element.

If you require a single component to appear multiple times on the same page, follow these steps:

Main component:

import ChildComponent from './ChildComponent';

export default {
    components: {
        ChildComponent
    },

    :
    :

Afterwards, you can easily include it (<child-component/>) wherever needed.

Keep in mind that in this scenario, the new parent component should be assigned to your vueInstance to serve as the root.

Answer 2

In my opinion, the desired outcome can be accomplished by establishing a root component that incorporates your component as a child element.

If you require a single component to appear multiple times on the same page, follow these steps:

Main component:

import ChildComponent from './ChildComponent';

export default {
    components: {
        ChildComponent
    },

    :
    :

Afterwards, you can easily include it (<child-component/>) wherever needed.

Keep in mind that in this scenario, the new parent component should be assigned to your vueInstance to serve as the root.

Is it possible to attach a Vue component to more than one div element simultaneously?

Answer №1

Similar questions

Discover various ways to encapsulate Vue.js components

Is it possible to prefetch library calls in Next.js in advance?

The rule "react/jsx-sort-props" does not have a valid configuration

What is the proper way to reference a computed symbol that has been inherited as a function in an extended class

What is the best way to send props from a child component to its parent in a React

What is preventing me from binding ng-click to my element?

Using React.JS: Display Object Map in rendering

Using the setTimeout function within the created lifecycle hook in Vue.js

Node.js socket.io emit function not functioning properly

The Protractor option is nowhere to be found on the Run Configuration popup window in Eclipse

Pass information to a PHP file using JavaScript when the form is submitted

The PHP file on the server is missing the mandatory "event" parameter for the EventSource

Steer Your Way: How to Redirect to a Different Router or Middleware in Node.js and Express.js

When attempting to send data using jQuery to PHP, an issue arises where PHP is unable to receive the information, resulting in an undefined variable

Troubleshooting Issue with Ionic's UI Router

Using the foreach Loop in Javascript and AngularJs

Capture all URLs containing [...slug] and generate static props only for valid addresses in Next.js

Adjusting the border-right size based on scroll position

Is there a way to prevent the text in my text boxes from staying there when I refresh the page?

AngularJS dropdown not reflecting changes when using ng-selected