search

gwenaelp / vfg-field-array

A vue-form-generator field to handle arrays
MIT License
39 stars 24 forks source link

[ERROR] Error during usage bootstrap accordion item #5

Open mpocin opened 6 years ago

mpocin commented 6 years ago

Dear @gwenaelp, I'm having some issues during usage of the component that uses bootstrap accordion item. here the console log:

Unknown custom element: <field-array-bootstrap-accordion-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

here some dependencies: "vue": "^2.5.2", "vue-form-generator": "^2.2.2", "bootstrap": "^4.1.3", "jquery": "^3.3.1", "vfg-field-array": "0.0.0-development"

here the snippet of the code:

<template>

  <vue-form-generator :model="model"
                      :schema="schema"
                      :options="formOptions"
                      ref="form">
  </vue-form-generator>

</template>

and at the script part I just copied the code at: (https://github.com/gwenaelp/vfg-field-array#with-bootstrap-4-container-component-object-as-array-item-validation-and-inputname)

and the main.js:

...
import VueFormGenerator from 'vue-form-generator'
import 'vue-form-generator/dist/vfg.css'
import FieldArray from 'vfg-field-array'

...
Vue.use(VueFormGenerator)
Vue.use(FieldArray)

what I'm doing wrong?

gwenaelp commented 6 years ago

I think you need to import this component manually. There was a discussion about it few months ago and I decided not to merge it in the core of vfg-field-array, because I don't think adding bootstrap as a dependency of this lib is a good idea. We are not all using bootstrap and it's a heavy dependancy.

If you have a look at the stories folder, you will see that there is a "bootstrap-accordion-container.vue" file. This contains the component you are trying to integrate.

What you need to do is to load yourself this component. Try to load it globally in your main.js : 

import bootstrapAccordionContainerItem from 'my/folder/bootstrap-accordion-container'

Vue.component('field-array-bootstrap-accordion-item', bootstrapAccordionContainerItem);

This should be able to solve this error.

If this works, you can also try to load it locally, which is a bit cleaner. It's been a long time I haven't done it this for array items containers in this lib, but I think you might be able to load it locally.

Tell me how you're doing with this issue, i'll try to investigate a bit more if you can't solve it :smile: :+1:

mpocin commented 5 years ago

Oh, thanks a lot for the reply. I will try your approach and I'll let you know. ^^

gwenaelp commented 5 years ago

I just updated the npm package, if there is still a problem, just put another message on this issue :D