formio / vue Goto Github PK
View Code? Open in Web Editor NEWJavascript Powered forms and JSON form builder for Vue.js
License: MIT License
Javascript Powered forms and JSON form builder for Vue.js
License: MIT License
i am work with bootstrap modal 5 but Form is not working when i giving src url
Please provide as many details as you can:
(same thing sometimes happens with form fields)
To only have one settings modal open.
Often, two settings modals open.
Hello Devs,
I am using vue-formio library, now I want to get the schema for a form that I have a design in form builder but I am getting a large object instead of a schema object
For code or form JSON, please enclose in a code block:
schema which i am getting
{
"label": "Text Field",
"labelPosition": "top",
"placeholder": "",
"description": "",
"tooltip": "",
"prefix": "",
"suffix": "",
"widget": {
"type": "input"
},
"inputMask": "",
"allowMultipleMasks": false,
"customClass": "",
"tabindex": "",
"autocomplete": "",
"hidden": false,
"hideLabel": false,
"showWordCount": false,
"showCharCount": false,
"mask": false,
"autofocus": false,
"spellcheck": true,
"disabled": false,
"tableView": true,
"modalEdit": false,
"multiple": false,
"persistent": true,
"inputFormat": "plain",
"protected": false,
"dbIndex": false,
"case": "",
"encrypted": false,
"redrawOn": "",
"clearOnHide": true,
"customDefaultValue": "",
"calculateValue": "",
"calculateServer": false,
"allowCalculateOverride": false,
"validateOn": "change",
"validate": {
"required": false,
"pattern": "",
"customMessage": "",
"custom": "",
"customPrivate": false,
"json": "",
"minLength": "",
"maxLength": "",
"strictDateValidation": false,
"multiple": false,
"unique": false
},
"unique": false,
"errorLabel": "",
"key": "textField",
"tags": [],
"properties": {},
"conditional": {
"show": null,
"when": null,
"eq": "",
"json": ""
},
"customConditional": "",
"logic": [],
"attributes": {},
"overlay": {
"style": "",
"page": "",
"left": "",
"top": "",
"width": "",
"height": ""
},
"type": "textfield",
"input": true,
"refreshOn": "",
"dataGridLabel": false,
"inputType": "text",
"id": "ev6786",
"defaultValue": null
}
But I want to like this
{
"label": "Text Field",
"tableView": true,
"key": "textField",
"type": "textfield",
"input": true
}
My code is to get schema
methods:{
saveComponent(){
console.log(JSON.parse(JSON.stringify(this.$refs['formio-form'].builder.form)))
}
}
Template code
<div id="app">
<div>
<FormBuilder ref="formio-form" v-bind:form="{display: 'from',components:component}" v-bind:options="" v-on:change="jsonSchema" v-on:saveComponent="saveComponent"></FormBuilder>
</div>
</div></template>```
Hi,
Are there any methods available for generating the whole form as PDF?
Thanks in advance!
Vuejs 2.6.12
Bootstrap Vue 2.21.1
Bootstrap 4.6.0
formio-vue
Form builder to build a form and all items to display
Form builder only allows me to add one item and then constantly replaces that item instead of adding
I'm using formio with Vue.js (v3.2.31), trying to embed a formio resource (e.g., form) into the Vue app. When executing 'npm run dev', got below error:
When clicking into index.ts:3:1, it says ' Could not load content for http://localhost:3000/node_modules/vue-formio/src/index.ts (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)', see the screenshot below:
.
Below is the vue component using the formio resource:
<template>
<div id="app">
<formio :src="formUrl" v-on:submit="onSubmitMethod" />
</div>
</template>
<script>
import { Formio } from 'vue-formio';
export default {
data: function() {
// Load these from vuex or some other state store system.
return {
formUrl: "https://hcydsplculhonzk.form.io/crnacmpform"
}
},
components: {
formio: Formio
},
methods: {
onSubmitMethod: function(submission) {
console.log(submission);
}
}
};
</script>
Am I missing any steps?
has not style
I am trying to render https://examples.form.io/example using vue-formio as per documentation.
Received the following error when rendered:
Unknown component: content
Unknown component: columns
Unknown component: survey
Unknown component: signature
Unknown component: button
Is this library incomplete, or missing some configurations?
import { Form } from 'vue-formio';
export default {
name: 'App',
components: {
formio: Form,
}
}
<formio src="https://examples.form.io/example" ></formio>
It seems this lib has not been updated to the latest version of form.io.
I tried to just upgrade the formio.js version but there seem to be some incompatibilities.
The issue I'm getting is related to the builder when the component is unloaded:
TypeError: this.builder.destroy is not a function
at VueComponent.default_1.destroyed (FormBuilder.js?7cc4:52)
at callHook (vue.esm.js?a026:2921)
at VueComponent.Vue.$destroy (vue.esm.js?a026:2725)
at destroy (vue.esm.js?a026:4178)
at invokeDestroyHook (vue.esm.js?a026:5743)
at invokeDestroyHook (vue.esm.js?a026:5748)
at removeVnodes (vue.esm.js?a026:5759)
at updateChildren (vue.esm.js?a026:5864)
at patchVnode (vue.esm.js?a026:5936)
at VueComponent.patch [as __patch__] (vue.esm.js?a026:6096)
Please provide as many details as you can:
Change event should only trigger once
It triggers twice
It seem that there is already a component in formio that emits change
event after component has been removed, updated or saved.
After emitting a change event in:
https://github.com/formio/vue-formio/blob/master/src/components/FormBuilder.ts#L67
there comes a second event change
that is emitted in:
https://github.com/formio/vue-formio/blob/master/src/components/FormBuilder.ts#L62
Even if the line FormBuilder.ts#L67
is commented out, the event will still occur. So, is emitting this event separately necessary?
When I create a new vue project (v2.6.10) and I import vue-formio (v3.0.2) vue-cli show this message in the browser
../node_modules/formiojs/Form.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' in 'C:\xampp\htdocs\vyroba-spa\node_modules\formiojs'
Show form created in form.io
These dependencies were not found:
To install them, you can run: npm install --save core-js/modules/es.array.concat core-js/modules/es.array.filter core-js/modules/es.array.find core-js/modules/es.array.find-index core-js/modules/es.array.from core-js/modules/es.array.includes core-js/modules/es.array.iterator core-js/modules/es.array.join core-js/modules/es.array.map core-js/modules/es.array.slice core-js/modules/es.array.splice core-js/modules/es.function.name core-js/modules/es.number.constructor core-js/modules/es.number.is-nan core-js/modules/es.number.to-fixed core-js/modules/es.object.assign core-js/modules/es.object.get-own-property-descriptor core-js/modules/es.object.get-own-property-descriptors core-js/modules/es.object.get-prototype-of core-js/modules/es.object.keys core-js/modules/es.object.to-string core-js/modules/es.reflect.construct core-js/modules/es.reflect.get core-js/modules/es.reflect.set core-js/modules/es.regexp.constructor core-js/modules/es.regexp.to-string core-js/modules/es.string.includes core-js/modules/es.string.iterator core-js/modules/es.string.match core-js/modules/es.string.pad-start core-js/modules/es.string.repeat core-js/modules/es.string.replace core-js/modules/es.string.search core-js/modules/es.string.split core-js/modules/es.string.trim core-js/modules/es.symbol core-js/modules/es.symbol.description core-js/modules/es.symbol.iterator core-js/modules/es.typed-array.copy-within core-js/modules/es.typed-array.every core-js/modules/es.typed-array.fill core-js/modules/es.typed-array.filter core-js/modules/es.typed-array.find core-js/modules/es.typed-array.find-index core-js/modules/es.typed-array.for-each core-js/modules/es.typed-array.includes core-js/modules/es.typed-array.index-of core-js/modules/es.typed-array.iterator core-js/modules/es.typed-array.join core-js/modules/es.typed-array.last-index-of core-js/modules/es.typed-array.map core-js/modules/es.typed-array.reduce core-js/modules/es.typed-array.reduce-right core-js/modules/es.typed-array.reverse core-js/modules/es.typed-array.set core-js/modules/es.typed-array.slice core-js/modules/es.typed-array.some core-js/modules/es.typed-array.sort core-js/modules/es.typed-array.subarray core-js/modules/es.typed-array.to-locale-string core-js/modules/es.typed-array.to-string core-js/modules/es.typed-array.uint8-array core-js/modules/web.dom-collections.for-each core-js/modules/web.dom-collections.iterator
`
`
Hello, I was wondering if there would be a Vuetify template support in the near future. Thank you
Hi,
Are there any methods available for generating the whole form as PDF?
Thanks in advance!
Please provide as many details as you can:
Is it possible to publish this version in javaScript format !?
And also when the stable version will be released!?
ERROR in .//formiojs/components/datagrid/DataGrid.js/formiojs/components/datagrid/DataGrid.js 138:12-43
Module not found: Error: Cannot resolve module 'vue-style-loader!css' in D:\vue-vuex-starter-kit-next\node_modules\formiojs\components\datagrid
@ ./
WebformBuilder.js 152:12-43 && DataGrid.js 138:12-43 is same code:
var dragula;
if (typeof window !== 'undefined') {
// Import from "dist" because it would require and "global" would not be defined in Angular apps.
dragula = require('dragula/dist/dragula');
}
It could be caused by dragula,
Anyone know how to fix it ? Thank you !
I have successfully loaded a form on my webpage, but there is incorrect behavior when I submit the form. The headers show the correct data object in the body but my resource on form IO shows that I submitted blank form fields. The response I get back is all blanks as well.
url: https://{myhost}.form.io/eligibility/submission
request body: data: {isyourGpAabovea30Ona4Pointscale: "no", areyouaUSCitizen: "yes", submit: true}
response: 201
response body: data: {}
I tried the exact same url and body in postman and the behavior is correct and I receive a correct response.
here is my form io tag
formio(:src="formsrc" @submit="HandleSubmit" @submitDone="HandleSubmitDone")
I am currently using "vue-formio": "^4.0.7" without Typescript and coming across the 'namespace' error.
I was able to fix the issue by editing Form.js line 144
from
var namespace = _this.options.namespace || 'formio';
to
var namespace = _this.hasOwnProperty('options') ? _this.options.namespace : 'formio';
When I pushed the code into production via vercel it is retrieving the current lib, is there a way to extend the Form.js setupForm function with my changes?
When a form has a select component using a resource as values, the formio component uses the following API call:
https://api.form.io/form/<form_id>/submission?<filters>
when in reality it should be:
https://api.form.io/<machine>/form/<form_id>/submission?<filters>
As an example I created the following form. Using Form.io's formview the API call made is correct:
https://api.form.io/mxutsqrnrusfanc/form/5b07f4633fa56bac4d45910e/submission?limit=5&skip=0&sort=data.shortName
but when using vue-formio
the call is the following:
https://api.form.io/form/5b07f4633fa56bac4d45910e/submission?sort=data.shortName&limit=100&skip=0
Last, it seems the limit property is not being used in vue-formio
and instead the default value limit=100
is being used
I'm loading different submission: {data: {}}
data into my form, but I couldn't find a way to reset the form. I thought I would set this.submission = {}
but that just keeps the last loaded data inside the form, almost as if watch()
(https://github.com/formio/vue-formio/blob/master/src/components/Form.ts#L54) in the component doesn't notice the change...
<formio id="formio-form"
:form="form"
:submission="submission"
:options="options"
v-on:submit="submit"
v-on:submitDone="submitDone"
language="de"></formio>
var app = new Vue({
el: '#app',
data: $.extend({}, {
// formio
form: appdata.formio.form,
submission: {},
options: {},
}, appdata),
methods: {
bootstrapModalHide(e){
// RESET THE FORM
this.submission = {};
},
bootstrapModalShow(e){
this.submission = {};
var form_data = {};
const button = $(e.relatedTarget); // Button that triggered the modal
const id = button.data('id');
if(id){
const form_data = collect(this.contactPersons).firstWhere('id', id); // find dataset
// Setting form submission data works here.
this.submission = {data: form_data};
}
}
}
})
How can I trigger resetForm()
(https://github.com/formio/formio.js/blob/e4c96709d32e17c58b05436f483b879ea6fd9f27/src/Webform.js#L861) in the vue component?
Hello @randallknutson!
I just tried updating the package to get the language functionality, but it seems that the npm package does not have the latest version, is it possible for you to compile and publish the current vue-formio version?
Best Ignacio
@randallknutson I have a suggestion (I can make a PR if you consider it worthwhile).
I think that it would be better to emit events to the Vue root instead in scope of local component like it is done now (here: https://github.com/formio/vue-formio/blob/v3.0.0/src/components/Form.ts#L131 and here: https://github.com/formio/vue-formio/blob/v3.0.0/src/components/Form.ts#L135 ). It takes away one issue I had with setting up listeners. Because Formio loads itself asynchronously I need to make sure that my refs are already available, sadly I had problems to grab my refs in "mounted" lifecycle hook, which made it problematic to attach my listeners. Now, if the event would have been emitted to the Vue root I could setup my listeners in whatever lifecycle hook I want and execute some callbacks involving having refs safely.
I use one drop down and one nested form.
Tested form https://korhokdpdjyirwt.form.io/second
This issue appears when you add conditions for nested forms.
formiojs 3.0, vue-formio 3.0
Form.js:82 RangeError: Maximum call stack size exceeded
at RegExp.test (<anonymous>)
at isKey (lodash.js:6317)
at castPath (lodash.js:4465)
at baseSet (lodash.js:3975)
at Function.set (lodash.js:13675)
at FormComponent.set (Base.js:2909)
at FormComponent.updateValue (Base.js:2276)
at FormComponent.setValue (Base.js:2538)
at FormComponent.setValue (Form.js:308)
at FormComponent.deleteValue (Base.js:2181)
latest formiojs:
RangeError: Maximum call stack size exceeded
at RegExp.test (<anonymous>)
at isKey (lodash.js:6317)
at castPath (lodash.js:4465)
at hasPath (lodash.js:6126)
at Function.has (lodash.js:13160)
at search (utils.js:690)
at utils.js:697
at lodash.js:4911
at baseForOwn (lodash.js:2996)
at Function.forOwn (lodash.js:13015)
latest formiojs with clear vue project:
RangeError: Maximum call stack size exceeded
at RegExp.test (<anonymous>)
at isKey (lodash.js:6317)
at castPath (lodash.js:4465)
at hasPath (lodash.js:6126)
at Function.has (lodash.js:13160)
at search (utils.js:690)
at getValue (utils.js:711)
at checkSimpleConditional (utils.js:523)
at Object.checkCondition (utils.js:613)
at FormComponent.conditionallyVisible (Base.js:1474)
Here is the example:
https://stackblitz.com/edit/vue-e6ob7v?file=index.js
Seeing a dropdown selection, from which the provided values can be selected.
The vue app displays a search field and renders the selectable values directly underneath it. When a value is selected, it is shown above the search field alongside a button to remove it. No dropdown selection is rendered.
The selection component is displayed correctly in the form.io preview. I also embedded the same form with the same data in the angular demo app, where it is also rendered correctly.
The fact that the form is rendering correctly in an angular app leads me to believe that the issue is with vue-formio or the way I am using it and not with formio itself. This is the first issue I am opening on github, I hope I chose an appropriate type and provided all necessary information.
Screenshot of the incorrectly rendered form. Radio component is working fine, underneath the label "Dropdown selection" a select component should be displayed. In the screenshot the form is styled with bootstrap, but I also tried it without any styling information.
The code for the vue component.
<template>
<div>
<h1>{{ msg }}</h1>
<div>
<formio
src="http://localhost:3001/path/to/form"
url=""
form=""
submission=""
options=""
></formio>
</div>
</div>
</template>
<script>
import { Form } from 'vue-formio'
export default {
name: 'app',
components: { formio: Form },
data () {
return {
msg: 'FormIO testing site'
}
}
}
</script>
I am using vuejs for frontend and laravel backend and i am trying to incorporate vue-formio for dynamic form creation. But nothing seems to work as i am getting an error when i create a new component. Am i doing something wrong?.
In the console i am getting something like
"app.js:161137 Uncaught TypeError: Object prototype may only be an Object or null: undefined
at setPrototypeOf ()
at ./node_modules/vue-formio/lib/components/Form.js.__extends (app.js:161137)"
FYI: i am using vue version 2.5.7
Can anyone tell me how to solve it ? Thank you.
Error messages in rendered form do not escape correctly special characters.
Had the following error message:
Role / Title is required
Instead got this:
Role / Title is required
Dear @randallknutson,
I was extracting some of the code of my Vue app the uses Form.io to generate exactly this library.
I tried importing this one but sadly didn't work for me out of the box.
I was able to grab your code and create a full Vue component (Sorry that I copied everything that you had) and now its working as expected in the App.
Want to have a look at what I have?
https://github.com/cabrerabywaters/formio-vue
We also hope to release a full Vue hybrid app for data collection that connects to Form.io in the next couple weeks (We are still fixing some bugs and cleaning the code)
You can take a look at the dev page http://fast.surge.sh/ for an example of an app built with this
The app includes full offline form submitting, multilanguage and automated deployment form Android (IOS on the way),Mac and PC using cordova
Regards!
How is the data bound in the form. Specifically is it two way and reactive. Does changing field inputs update the form automatically?
Formio Panel Component do not render its title. The component renders the component as the following bootstrap component:
<div class="card border-{{ theme }} panel panel-{{ theme }}">
<div class="card-body panel-body">
...
</div>
</div>
thus, not rendering the component's legend property.
It should render the following:
<div class="card border-{{ theme }} panel panel-{{ theme }}">
<div class="card-header panel-heading bg-{{ theme }} text-white">
{{ title }}
</div>
<div class="card-body panel-body">
...
</div>
</div>
The component’s select list is showing and there are two input boxes slightly overlaying on another.
Below is an example that will fail
"components":[
{"label":"Park","placeholder":"Enter the name of the part","allowMultipleMasks":false,"showWordCount":false,"showCharCount":false,"autofocus":true,"tableView":true,"alwaysEnabled":false,"type":"textfield","input":true,"key":"name","defaultValue":"","validate":{"customMessage":"","json":""},"conditional":{"show":"","when":"","json":""},"properties":{},"tags":[],"inputFormat":"plain","encrypted":false,"customConditional":"","logic":[],"widget":{"type":""},"reorder":false},
{"label":"Location","placeholder":"Select the state the park is THIS FAILS in","mask":false,"tableView":true,"alwaysEnabled":false,"type":"select","input":true,"key":"State","defaultValue":"","validate":{"select":false,"customMessage":"","json":""},"conditional":{"show":"","when":"","json":""},"data":{"values":[{"label":"Alabama","value":"Alabama"},{"label":"Wyoming","value":"Wyoming"}]},"valueProperty":"value","selectThreshold":0.3,"encrypted":false,"properties":{},"tags":[],"lazyLoad":false,"selectValues":"","disableLimit":false,"sort":"","reference":false,"customConditional":"","logic":[],"reorder":false}
]}
Please provide as many details as you can:
If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.
For code or form JSON, please enclose in a code block:
// your code here
The formbuilder should show the options to remove or edit the selected component, as shown in the link: https://formio.github.io/formio.js/app/builder
The formbuilder does not show any option to interact with the selected component.
<template>
<v-container>
<v-row>
<v-col sm="12" lg="12" col="12">
<FormBuilder v-bind:form="formContent" v-bind:options="formOptions"></FormBuilder>
</v-col>
</v-row>
</v-container>
</template>
<script lang="ts">
import Vue from 'vue'
import { FormBuilder } from 'vue-formio';
export default Vue.extend({
name: 'NewFormIO',
components: {
FormBuilder
},
data: () => ({
formOptions: {_id:"", project: "", id: "", projectId:"",},
formContent: {display: 'form', components: [], project: "", id: "", projectId:"", },
}),
created(){
},
methods: {
},
})
</script>
Should the formbuilder behave same as the previous link?
Should it be possible to expose the Form.io instance once the on form.io render or created method has the component? That way we could allow users to manipulate the Form.io instance to give it custom behavior.
Now the only possible solution for this is to wait for a change and the change event has the Form.io instance.
Or is there any other way?
Best!
How I get the the JSON Schema from the form Builder to save at the database ?
I'm using Vue.js
<template>
<div id="app">
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css" />
<form-builder v-bind:form="{ display: 'form' }" ></form-builder>
<button type="button" class="btn btn-primary">Salvar</button>
</div>
</template>
<script>
import { FormBuilder } from "vue-formio";
export default {
name: "app",
components: { FormBuilder },
data() {
return {};
}
};
</script>
I'd like to recommend that you guys add a Basic Usage
section to the README to help folks.
This is my recommendation:
HTML inside of Vue template file:
<template>
<div id="app">
<formio src="" url="" form="" submission="" options="" v-on:submit=""></formio>
</div>
</template>
Javascript inside of Vue template file.
<script>
import FormIo from 'vue-formio';
export default {
name: 'app',
components: { FormIo },
}
</script>
Please provide as many details as you can:
<template>
<Form
:form="formDefinition"
:submission="formSubmission"
:options="options"
/>
</template>
<script lang="ts">
import { Form, Templates } from "vue-formio";
import { Component, Prop, Vue } from "vue-property-decorator";
Templates.framework = "bootstrap";
@Component({
components: {
Form
}
})
export default class Formio extends Vue {
public get options(): any {
return {
readOnly: true,
renderMode: "html"
};
}
public get formSubmission(): any {
return {
data: {
myFavouriteThing: "My answer"
}
};
}
public get formDefinition(): any {
return {
components: [
{
label: "My favourite thing:",
persistent: true,
inputFormat: "plain",
key: "myFavouriteThing",
type: "textfield",
input: true,
inputType: "text",
id: "e3xydm5"
},
{
type: "button",
label: "Submit",
key: "submit",
size: "md",
action: "submit",
id: "estwkz"
}
]
};
}
}
</script>
Expecting it to render submission values in form
Hey, the select component acts weird when the options use numeric values.
Is there something I am missing? See attached component:
{ "key": "exampleSelect", "label": "Select", "type": "select", "defaultValue": 0, "validate": { "required": true }, "data": { "values": [ { "label": "zero", "value": 0 }, { "label": "hundred", "value": 100 } ] } }
Should vue-router be dependency? I don't see it used in the package.
after run
npm install
npm install vue-formio --save
npm start or pm run serve not working
please help me to fix this issue
Please provide as many details as you can:
When emitting an event from within a form, the FormBuilder component is not properly handling the case that a custom namespace is set in the options. The emit function consults the options.namespace setting to prefix the event type, but the FormBuilder component only ever checks for "Formio".
The event would be re-thrown into Vue
The event is swallowed.
I have a JSON form generated by an embedded device which I then load into a vue component. I create the form and later inject the JSON into :form. This all works well. I have some buttons in the form which trigger a custom event, which I've found no way to get to trigger.
Vue template:
<formio :form="this.roomOverviewHtml" :options="this.formioOptions" v-on:submit="this.myFormsubmit" v-on:customEvent="this.postButton" v-on:requestButton="this.postButton" v-on:submitButton="this.postButton"> </formio>
As you can see I'm trying to get any event to trigger, I've tried with an without colons and this.
Form object button:
components: Array(2) 0: {input: true, label: "", key: "k1065", defaultValue: "1", type: "htmlelement", …} 1: action: "custom" custom: "postButton('eventOverride(Input_Event_0)');" defaultValue: true input: true key: "eventOverride(Input_Event_0)" label: "Trigger" theme: "success" type: "button" __proto__: Object length: 2 __proto__: Array(0) key: "Input_Event_0" theme: "default" title: "Input_Event_0" type: "panel"
Note this bit action: "custom" custom: "postButton('eventOverride(Input_Event_0)');"
At the end of the day, I'd like it to call postMessage in my component.
It will call postMessage in a little bit of script I placed in the HTML, but then it's a mess trying to find the component again from globals and it trashes the modularity of it.
In short, I can get onChange events to work but no other v-on events.
I've lost days on this. Help please!
In Vue 3 the router has the problem to resolve the component:
[Vue Router warn]: Unexpected error when starting the router: Error: Couldn't resolve component "default" at "/incident/report" at eval (vue-router.esm-bundler.js?6c02:1903)
The Report.vue component which fails:
<template>
<div>
<formio :form="form"></formio>
</div>
</template>
<script lang="ts">
import { Form } from 'vue-formio'
export default {
components: { formio: Form },
computed: {
form () {
return {
components:[]
}
}
}
}
</script>
<style lang="scss">
</style>
The Router:
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/incident',
name: 'incident',
component: () => import('../views/Incident.vue'),
children: [
{
name: 'report',
path: 'report',
component: () => import('../views/Report.vue')
}
]
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
When I simply comment out all the form-io stuff everything works fine.
UPDATE
When i only have an vue 3 project without router the following error apperas:
Form.js?a78f:7 Uncaught TypeError: Object prototype may only be an Object or null: undefined
at setPrototypeOf (<anonymous>)
at __extends (Form.js?a78f:7)
at eval (Form.js?a78f:33)
at eval (Form.js?a78f:211)
at Object../node_modules/vue-formio/lib/components/Form.js (chunk-vendors.js:13564)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (index.js?2326:3)
at Object../node_modules/vue-formio/lib/components/index.js (chunk-vendors.js:13588)
at __webpack_require__ (app.js:849)
I'm not sure if possible but vue-formio needs to pass through with "display": "wizard".
Hi,
How I refresh the submission.data in form rendered ?
Please provide as many details as you can:
To not see step breadcrumb.
See breadcrumb.
JSON: https://gist.github.com/cymen/9d4073de369cba5b6e41d99c74e8d514
Hi,
I'm attempting to embed the FormBuilder / Form, following the instructions you provided in the readme.
I'm trying to include this in a fresh Laravel application. I created a new component, and included it on the page. I then receive the following error:
The error occurs when I import the module:
<template>
<h1>Hello!</h1>
</template>
<script>
import { Form } from 'vue-formio'; // <- If I remove this, it works fine...
export default {
name: 'viewer',
components: { Form },
}
</script>
If I remove the import statement, everything works fine, so the project setup itself should be okay as well.
Am I missing something in how I should package the components together?
Cheers
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.