乐趣区

关于nuxt.js:nuxt-使用-Vue-JSON-Schema-Form

当咱们须要对一些 结构复杂,或内容较多的 JSON 进行批改配置的时候,极易容易出错。于是,就想着是否能通过表单模式进行批改,保留。最初,发现了几个 JSON 编辑器。
1,Vue JSON Schema Form

2,Vue-Json-Edit

3,json-editor

这里采纳的是,第一个 Vue JSON Schema Form 插件。上面,就介绍一下,在 nuxt 中,如何应用。

1,装置

该命令是 装置 vue2 + elementUI 版本的。其余版本的装置命令能够查阅官网。
npm install --save @lljj/vue-json-schema-form

2,应用

2.1 在 plugins 下新增 json-schema.js 文件,调用组件

import Vue from "vue";
import VueForm from "@lljj/vue-json-schema-form";
Vue.component("VueForm", VueForm);

2.2,在所需的中央,应用 VueForm 组件

<template>
  <div>
    <VueForm
      v-model="formData"
      :schema="config.schema"
      :form-props="{layoutColumn: 2,}"@on-submit="handlerSubmit"@on-cancel="handleCancel"
    >
    </VueForm>
  </div>
</template>
<script>
import config from "@/config/config_form_schema";
export default {data() {
    return {
      config,
      formData: {},};
  },

  methods: {handleCancel(){// 勾销操作。},
    handlerSubmit() {
      // 提交操作。console.log('formData 后果:',this.formData)
    },
  },
};
</script>

当须要解决简单 JSON 文件时,能够采纳导入的形式,赋值给 schema
schema 的格局编写,可参考:配置 schema 和 JSON Schema 标准

2.3,表单输入。
2.3.1,具体的输入后果能够在 官网提供的案例链接 里查看 formData 的内容。
2.3.2,formData 的输入是对象。
2.3.3,在理论的开发中,只有解决 formData 即可。

退出移动版