How to render array of component instances in vue.js?

Question

I need to build list of dynamical components that I can group in group component. Then I need to send all information about builded components and groups.

I can use <component v-for="componentName in myComponents" :is="componentName"></component>, and get information about components using this.$children.map(component => component.getInformation()), but then I can't move some component to group component, because I have only component name not the component instance with data (it just render with default data).

I also can use this:

<template>
  <div ref="container"> </div>
</template>

<script>
  import someComponent from 'someComponent.vue'
  import Vue from 'vue'

  export default {
    data () {
      return {
        myComponents: []
      }
    },
    methods: {
      addSomeComponent () {
        let ComponentClass = Vue.extend(someComponent);
        let instance = new ComponentClass({});
        myComponents.push(instance);
        instance.$mount();
        this.$refs.container.appendChild(instance.$el)
      },
      getInformation () {
        return this.myComponents.map(component => component.getInformation());
      }
    }
  }
</script>

But then I can't use reactivity, directives (e.g. directives for drag and drop), and it's not data driven pattern.

Any suggestions?

Danon · Accepted Answer · 2018-07-16 08:24:56Z

1

<template>
    <div class="component">
        <template v-for="(child, index) in children()">
            <component :is="child" :key="child.name"></component>
        </template>
    </div>
</template>

<script>
  import someComponent from 'someComponent.vue'
  import Vue from 'vue'

  export default {
      methods: {
        children() {
            let ComponentClass = Vue.extend(someComponent);
            let instance = new ComponentClass({});

            return [
                instance
            ];
        },
      }
  }
</script>

answered Jul 16, 2018 at 8:24

Danon

3,00831 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to render array of component instances in vue.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related