vue-json-form

How to use

npm install @vue-json/vue-json-form

Project setup

npm install

Project start

npm start

Usage

// main.js
import '@vue-json/vue-json-form';
import '@vue-json/vue-json-form/index.css';

<!-- html -->
<vue-json-form v-model="formData" :list="list" vid="vid-test"></vue-json-form>
<el-button vid="vid-test" v-onsubmit="onSubmit" type="primary">submit</el-button>

export default {
 data() {
 return {
 formData: {
 color: '#F0F0F0'
 },
 list: [
 {
 type: 'input',
 label: 'nickname',
 field: 'nickname',
 rules: {
 required: true,
 valid: ({ value, formData }) => {
 if (value.includes('null')) {
 return {
 matched: false,
 message: 'Null is not allowed'
 };
 }
 return { matched: true };
 }
 }
 },
 {
 type: 'input-number',
 label: 'count',
 field: 'count',
 rules: {required: true, num: true }
 },
 {
 type: 'radio',
 label: 'type',
 field: 'type',
 rules: { required: true },
 options: [
 { label: 'type1', value: 1 },
 { label: 'type2', value: 2 }
 ]
 },
 {
 type: 'select',
 label: 'province',
 field: 'province',
 rules: { required: true },
 optionsAsync: async () => {
 return new Promise((resolve) => {
 setTimeout(() => {
 resolve([
 { label: 'London', value: 1 },
 { label: 'New York', value: 2 }
 ])
 }, 300);
 })
 }
 },
 {
 type: 'switch',
 label: 'open',
 field: 'isOpen',
 rules: { required: true },
 // vif control showOrHide
 vif: (formData) => formData.type === 1
 },
 {
 type: 'daterange',
 label: 'daterange',
 field: 'dateRange',
 rules: { required: true },
 attrs: {
 startField: 'beginDate',
 endField: 'endDate'
 }
 },
 ]
 };
 },
 methods: {
 async onSubmit(valided, { formData }) {
 if (!valided) return;
 // TOTO:
 console.log(formData);
 }
 }
};

Services

License