vue-generators / vue-form-generator

:clipboard: A schema-based form generator component for Vue.js
MIT License
2.99k stars 532 forks source link

Facing few issues when using this with webpackage #247

Open bhupenderkeswani opened 7 years ago

bhupenderkeswani commented 7 years ago

No doubt this is awesome plugin, saved lot of my work (Creating form via Schema) but facing following few issues and unable to debug them

  1. Datepicker in webpackage throws error "Bootstrap datetimepicker library is missing. Please download from https://eonasdan.github.io/bootstrap-datetimepicker/ and load the script and CSS in the HTML head section!"
  2. VueMultiSelect ain't working, in browser it says ' Error: Permission denied to access property "toString" ' (even when i am using simple example)
  3. Only required validation is working, rest don't work

Following is my main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'moment'
import 'jquery'
import 'bootstrap'
import BootstrapDatePicker from 'vue-bootstrap-datetimepicker'

import vueMultiSelect from 'vue-multiselect'
import VueFormGenerator from 'vue-form-generator'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'vue-multiselect/dist/vue-multiselect.min.css'

import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css'
import 'vue-form-generator/dist/vfg.css'

Vue.config.productionTip = false
Vue.use({vueMultiSelect, VueFormGenerator})
Vue.component(BootstrapDatePicker)
Vue.component('multiselect', vueMultiSelect.default)
Vue.component('vue-form-generator', VueFormGenerator.component)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})
icebob commented 7 years ago

Please create an example with your issue on webpackbin. https://www.webpackbin.com/bins/-KfTYPHVhmsBlJ42OZgT

cristijora commented 7 years ago

I think the main issue here is that the datepicker field is built for the jquery bootstrap datepicker https://github.com/icebob/vue-form-generator/blob/master/src/fields/optional/fieldDateTimePicker.vue#L47

while @bhupender005 uses the vue-bootstrap-datepicker import BootstrapDatePicker from 'vue-bootstrap-datetimepicker' which obviously is something different than the jquery one

Above that I'm not sure about this syntax

Vue.use({vueMultiSelect, VueFormGenerator})

Maybe use

Vue.use(vueMultiSelect)
Vue.use(VueFormGenerator)