@667/vue-json-ui-editor 中文文档教程

Question

json-editor

使用 JSON Schema 和 Vue.js 以 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 'vue-json-ui-editor';
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>

更多信息：Example-Subscription 模式：newsletter.json

props

• schema Object（需要） JSON 模式对象。 使用 v-if 指令加载异步模式。

• v-model Object（可选）默认：[object Object] 使用此指令创建与组件的双向数据绑定。 它会根据输入类型自动选择正确的方式来更新元素。

• 自动完成 String（可选） 该属性表示控件的值是否可以由浏览器自动补全。 可能的值是：off 和 on。

• 不验证 布尔值（可选） 此布尔属性表示提交时不验证表单。

• 输入包装类 String（可选） 定义输入包装类。 保留 undefined 以禁用输入换行。

data

• <代码>默认 初始值： [object Object]

• 字段 初始值： [object Object]

• 错误 初始值： null

• data 初始值： [object Object]

events

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

• change 当用户提交对元素值的更改时触发。

• invalid 当可提交元素已被检查但不满足其约束时触发。 可提交元素的有效性在提交其所有者表单之前检查，或者在调用元素或其所有者表单的 checkValidity() 之后检查。

• submit 提交表单时触发

methods

• input(name) 获取表单输入引用

• form() 获取表单引用

• checkValidity() 检查表单是否有任何约束以及它是否满足这些约束。 如果表单未通过其约束，浏览器将在元素上触发可取消的 invalid 事件，然后返回 false。

• <代码>重置（） 重置父表单所有元素的值。

• <代码>提交（事件） 将表单内容发送到服务器

• setErrorMessage(message) 设置消息错误。

• <代码>clearErrorMessage() 清除消息错误。