json schema_使用JSON Schema和Vue.js以UI形式编辑JSON

json schema

json编辑器 (json-editor)

Edit JSON in UI form with JSON Schema and Vue.js json-editor component.

使用JSON Schema和Vue.js json-editor组件以UI形式编辑JSON。

安装 (Install)

npm install vue-json-ui-editor --save

用 (Use)

<template>
<json-editor ref="JsonEditor" :schema="schema" v-model="model">
    <button @click="submit">submit</button>
    <button @click="reset">Reset</button>
</json-editor>
</template>

<script>
const SCHEMA = {
  type: 'object',
  title: 'vue-json-editor demo',
  properties: {
    name: {
      type: 'string',
    },
    email: {
      type: 'string',
    },
  },
};
// import vue-json-ui-editor
import JsonEditor from '../../src/JsonEditor.vue';
export default {
  components: { JsonEditor },
  data: () => ({
    // init json schma file ( require('@/schema/newsletter') )
    schema: SCHEMA,
    // data
    model: {
      name: 'Yourtion',
    },
  }),

  methods: {
    submit(_e) {
      alert(JSON.stringify(this.model));
    },
    reset() {
      this.$refs.JsonEditor.reset();
    },
  },
};
</script>

More info on: Example-Subscription Schema: newsletter.json

有关更多信息： 示例订阅模式： newsletter.json

道具 (props)

• schema Object (required) The JSON Schema object. Use the v-if directive to load asynchronous schema.

  schema Object ( 必需 )JSON Schema对象。 使用v-if指令加载异步模式。

• v-model Object (optional) default: [object Object] Use this directive to create two-way data bindings with the component. It automatically picks the correct way to update the element based on the input type.

  v-model Object ( 可选 ) default: [object Object]使用此伪指令可与组件创建双向数据绑定。 它会根据输入类型自动选择更新元素的正确方法。

• auto-complete String (optional) This property indicates whether the value of the control can be automatically completed by the browser. Possible values are: off and on.

  auto-complete String ( 可选 )此属性指示浏览器是否可以自动完成控件的值。 可能的值为： off和on 。

• no-validate Boolean (optional) This Boolean attribute indicates that the form is not to be validated when submitted.

  no-validate 布尔值 ( 可选 )此布尔值属性指示在提交表单时不对其进行验证。

• input-wrapping-class String (optional) Define the inputs wrapping class. Leave undefined to disable input wrapping.

  input-wrapping-class 字符串 ( 可选 )定义输入包装类。 保留undefined以禁用输入换行。

数据 (data)

• default initial value: [object Object]

  default 初始值： [object Object]

• fields initial value: [object Object]

  fields 初始值： [object Object]

• error initial value: null

  error 初始值： null

• data initial value: [object Object]

  data 初始值： [object Object]

大事记 (events)

• input Fired synchronously when the value of an element is changed.

  input当元素的值更改时同步触发。

• change Fired when a change to the element's value is committed by the user.

  当用户提交对元素值的change触发。

• invalid Fired when a submittable element has been checked and doesn't satisfy its constraints. The validity of submittable elements is checked before submitting their owner form, or after the checkValidity() of the element or its owner form is called.

  invalid在检查了可提交元素并且不满足其约束条件时触发。 在提交其所有者表单之前，或者在checkValidity()元素或其所有者表单的checkValidity()之后，检查可提交元素的有效性。

• submit Fired when a form is submitted

  submit表单时触发

方法 (methods)

• input(name) Get a form input reference

  input(name)获取表单输入参考

• form() Get the form reference

  form()获取表单参考

• checkValidity() Checks whether the form has any constraints and whether it satisfies them. If the form fails its constraints, the browser fires a cancelable invalid event at the element, and then returns false.

  checkValidity()检查表单是否具有任何约束以及是否满足约束。 如果表单无法满足其约束条件，则浏览器将在该元素上引发可取消的invalid事件，然后返回false。

• reset() Reset the value of all elements of the parent form.

  reset()重置父窗体的所有元素的值。

• submit(event) Send the content of the form to the server

  submit(event)将表单内容发送到服务器

• setErrorMessage(message) Set a message error.

  setErrorMessage(message)设置消息错误。

• clearErrorMessage() clear the message error.

  clearErrorMessage()清除消息错误。

翻译自: https://vuejsexamples.com/edit-json-in-ui-form-with-json-schema-and-vue-js/

json schema