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

Eliminate an array from another array if a specific value is present in an object

unable to retrieve the value of this.table property within a JavaScript class

Traversing a hierarchical structure and building a REACT user interface based on it

Interacting with Node JS by submitting a request and obtaining a response

Vue Google Tag Manager Error: This file type requires a specific loader to be handled correctly

What is the equivalent of preg_replace in PHP using jquery/javascript replace?

Denied running the inline script in Redocly

display and conceal elements according to the slider's current value

Tips for dynamically updating text input values within a v-for loop

Navigate to a particular date with react-big-calendar

Accept only numerical values, addition and subtraction symbols, commas, the F5 key, and various other characters

Determining if a date has passed using moment.js, focusing solely on the date

What is the best way to transfer Express.js variables to MongoDB operations?

Looking for a Plugin that Can Responsively Display Images in a Vertical Layout - Does One Exist using Jquery

Using useCallback with an arrow function as a prop argument

Take the .vue files stored in the components directory and convert them into a JSON format for exporting

Angular's '@angular/core/core' module does not have the exported member 'ɵɵFactoryDeclaration'

Having issues with connecting the front-end (Vue) to the API (Node.js), utilizing nginx on an EC2 AWS instance running Ubuntu 20.04

Obtaining JSON data in a separate JavaScript file using PHP

I'm curious about the meaning of "!" in pseudo-code. I understand that it represents factorial, but I'm unsure of how to properly interpret it