Examples

Simple array

{model:{array:["item1","item2","item3"]},schema:{fields:[{type:"array",label:"Array field",model:"array",showRemoveButton:true}]}}

With container component

{model:{array:["item1","item2","item3"]},schema:{fields:[{type:"array",label:"Array field",model:"array",itemContainerComponent:"Container"}]}}

Container.vue

<template><div><div><divclass="title"><a@click="contentVisible = !contentVisible">          {{contentVisible ? "-" : "+"}} Container ({{model}})</a><a@click="$emit('removeItem')">          X</a></div><divclass="content"v-if="contentVisible"><slot></slot></div></div></div></template><script>exportdefault{props:["model"],data(){return{contentVisible:false};}};</script><stylescoped>  .title {background: whitesmoke; }  .content {border:2px solid whitesmoke;padding:10px; }a {color: blue;text-decoration: underline; }</style>

With container component and object as array item

{model:{columns:[{"label":"Name","field":"full_name","template":""},{"label":"URL","field":"html_url","template":""},{"label":"Date","field":"date","template":""}],},schema:{type:'array',label:'Columns',model:'columns',itemContainerComponent:'WidgetListColumnEditorContainer',showRemoveButton:false,fieldClasses:'arrayEditor',newElementButtonLabelClasses:"button is-primary",items:{type:'object',default:{},schema:{fields:[{type:'input',inputType:'text',label:'Label',model:'label',},{type:'input',inputType:'text',label:'Field',model:'field',},{type:'sourcecode',label:'Template',model:'template',}]}}}}

With bootstrap 4 container component, object as array item, validation and inputName

model:{columns:{}},schema:{fields:[{type:"array",label:'Columns',model:'columns',inputName:"columns",showRemoveButton:false,newElementButtonLabelClasses:"btn btn-outline-dark mt-2",itemContainerComponent:"field-array-bootstrap-accordion-item",newElementButtonLabel:"+ Add Column",itemContainerHeader:function(model,schema,index){return"Column "+(index+1)+(model&&model.label ?" ("+model.label+")":"");},items:{type:'object',schema:{fields:[{type:"input",inputType:"text",label:"Name",model:"name",inputName:"name",required:true,validator:"string",},{type:"input",inputType:"text",label:"Description",model:"description",inputName:"description",validator:"string"},{type:"select",label:"Field Type",model:"type",inputName:"type",required:true,validator:"string",values:[{id:"string",name:"Text Field"},{id:"text",name:"Text Area"},{id:"number",name:"Number"},{id:"date",name:"Date"},{id:"select",name:"Single selection"},{id:"multiselect",name:"Multiple Selection"},{id:"boolean",name:"True/False"}]},{type:"array",label:"Values",model:"values",inputName:"values",validator:"array",showRemoveButton:true,showModeElementUpButton:true,showModeElementDownButton:true,itemFieldClasses:"form-control",itemContainerClasses:"input-group pb-2",newElementButtonLabelClasses:"btn btn-outline-dark",removeElementButtonClasses:"btn btn-danger input-group-append",moveElementUpButtonClasses:"btn btn-outline-dark input-group-append",moveElementDownButtonClasses:"btn btn-outline-dark input-group-append",newElementButtonLabel:"+ Add Value",visible:function(model){returnmodel&&(model.type==="select"||model.type==="multiselect");},required:function(model){returnmodel&&(model.type==="select"||model.type==="multiselect");}},{type:"input",inputType:"number",label:"Rows (optional)",model:"rows",inputName:"rows",validator:"integer",visible:function(model){returnmodel&&model.type==="text";}}]}}}]},formOptions:{validateAfterChanged:true}

Installation

npm install vfg-field-array

ES6

//// You can register a component manually//import{FieldArray}from'vfg-field-array';exportdefault{  ...components:{FieldArray},  ...};//// or register the whole module with vue//importModuleLibraryfrom'vfg-field-array';// Install this libraryVue.use(ModuleLibrary);

CommonJS

//// You can register a component manually//varVue=require('vue');varModuleLibrary=require('vfg-field-array');varYourComponent=Vue.extend({  ...components:{'field-array':ModuleLibrary.FieldArray},  ...});//// or register the whole module with vue//varVue=require('vue');varModuleLibrary=require('vfg-field-array');// Install this libraryVue.use(ModuleLibrary);

Browser

<scriptsrc="path/to/vue/vue.min.js"></script><scriptsrc="path/to/vfg-field-array/dist/vfg-field-array.min.js"></script><!-- Components are registered globally -->

After that, you can use it with Vue Form Generator:

  schema:{fields:[{type:"array",label:"My array",model:"myArray"}]}

Changelog

Contributing