vfg-field-array
vfg-field-array copied to clipboard
[ERROR] Error during usage bootstrap accordion item
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?
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:
Oh, thanks a lot for the reply. I will try your approach and I'll let you know. ^^
I just updated the npm package, if there is still a problem, just put another message on this issue :D