vuejs loading entire .vue file dynamically from 1 template into another

Question

Sorry if this is a repeat - I have had a look around and spent most of today on this issue without getting result I am after.

https://github.com/vahidhedayati/micronaut-vuejs-cqrs/blob/master/frontend/src/components/sample/dynamicForm/PropertySplit.vue#L29

https://github.com/vahidhedayati/micronaut-vuejs-cqrs/blob/master/frontend/src/components/sample/dynamicForm2/Property2.vue#L31

I have two similar vue parent pages that load up dynamic form content, what I am trying to do is to get the actual form content which resides on a totally different .vue file in each of the sub folders above.

If I use Vue.component('form-content' this does work but I end up with 1 instance of the form for both different calls rather than a dynamic form per call. So one of the two forms gets loaded in and reused on both calls.

I have tried to use a const variable instead of Vue.component which works correctly locally on the main vue page that loads in the const variable but I haven't been able to get child page to load up the const value

//import Vue from 'vue'
//Vue.component('form-content', {
//   components: { ActualForm },
//    template: `<actual-form></actual-form>`
//});

//const content = {
//  components: { ActualForm },
//  template: `<actual-form></actual-form>`
//}

ActualForm.vue is another page and ideally I want to be able to pass this dyanmically per call on different page to the underlying DynamicForm.vue which will load title etc and then the form as per vue page that is passed in.

It seems trivial not quite sure why I am struggling with this.

Sorry i'm struggling to understand your question, do you have two vue components that need to share the same vue form? — Rich
– Rich, Commented Jul 8, 2019 at 14:54
basically I have an overall template to make up a form and I wish to use alternative .vue files that use the master form template and whilst titles etc all appear to load dynamically the actual form content sits on another .vue file and I wish to pass .vue files from each of the form makers into master form template if it makes any sense — V H
– V H, Commented Jul 8, 2019 at 14:58
I think what you're trying to achieve is what @bodo mentions in his answer. — Leite
– Leite, Commented Jul 8, 2019 at 15:01
Thank you all and @bodo - I seen slots but was struggling below example should help me get there. — V H
– V H, Commented Jul 8, 2019 at 15:02

bodo · Accepted Answer · 2019-07-08 14:58:10Z

You cannot pass a component to another component through a prop. For that you need to use a slot. So your code would look like:

<dynamic-form
  :headingText="currentHeadingText"
  :sectionHeadingText="currentSectionHeadingText"
>
  <actual-form/>
</dynamic-form>

And in the <dynamic-form> component you would write:

<template>
  […]
  <slot></slot>
  […]
</template

Then the <actual-form> component would be included at the position of the <slot>-tag. You can also use multiple slots and pass in multiple components / template segments. (Read the docs on vuejs.org for detailed information)

I am not completely sure what you are trying to do though. Maybe you need to structure your application in a different way. E.g. use the <dynamic-form> in the template of the <actual-form>. You could then still pass props to <dynamic-form> and fill slots therein from the <actual-form>.

Collectives™ on Stack Overflow

vuejs loading entire .vue file dynamically from 1 template into another

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