vue form json schema

vue form jsonスキーマ

JSONスキーマベースのフォームジェネレーター、コンポーネントをお持ちください！

VueコンポーネントまたはHTML要素を使用してください！

フォームを一緒にパズルするための事前に構築されたコンポーネントはありません。代わりに、カスタムまたはネイティブのイベントを発するコンポーネントまたは要素を使用できます。

v-modelを使用するすべてのVUEコンポーネントは、 input （または同様の）イベントを発することに注意してください。詳細については、Vue's Guideを参照してください

インストール

V1からアップグレードしますか？ V2リリースノートをチェックして、移行があなたに影響するかどうか、どのように影響するかを確認してください。

NPMからインストールします

npm install vue-form-json-schema

アプリにインポートします

 import Vue from 'vue' ;
import VueFormJsonSchema from 'vue-form-json-schema' ;

Vue . component ( 'vue-form-json-schema' , VueFormJsonSchema ) ;

注Webpack / lollupを使用していない場合、ESMバージョンを使用したい場合は、このようなVueFormJsonschemaをインポートする必要があります。

 import VueFormJsonSchema from 'vue-form-json-schema/dist/vue-form-json-schema.esm.js' ;

デモを確認するか、使用開始の使用手順の最小限の例をご覧ください。

umd

UMDバージョンを使用している場合は、GitHub Repoのexamplesフォルダーと以下のUMDデモで、より多くの例を見つけることができます。

ブラウザで直接vue-form-json-schema使用する場合は、UMDバージョンを使用してそうすることができます。 UMDバージョンは、Vueがウィンドウにある場合vue-form-json-schemaコンポーネントを自動インストールします。モジュール全体は、 window.VueFormJsonSchemaでも利用できます。たとえば、 vfjsFieldMixinなどの指名されたエクスポートにアクセスできます。

UNKPGがホスト

<script src="https://unpkg.com/vue-form-json-schema@latest/dist/vue-form-json-schema.umd.js"></script>

[email protected]などの固定バージョンのvue-form-json-schema@latest

NPMからインストール

<script src="../node_modules/dist/vue-form-json-schema.umd.js"></script>

デモ

すべてのデモはブートストラップスタイリングを使用していますが、このパッケージにはスタイリングが含まれておらず、どのスタイルを使用すべきかはあなた次第です。

最小限のデモ

input要素をレンダリングするための構成の最小量。

ネストされたUIデモ

ブートストラップクラスを使用して、画面サイズが異なるデバイスでレイアウトがどのように異なるかを示します。この例ではcol-12 col-sm-6クラスを備えた2つの入力フィールドをDIV内に包みます。ブラウザウィンドウも変更してください。

条件付き可視性とアニメーションデモ

条件が満たされた場合にのみフィールドを表示する必要があります。 <transition>を使用してアニメーションを提供します。

Vueコンポーネントデモ

vue-form-json-schemaで独自のVue Vueコンポーネントを使用する方法をご覧ください。

フォームのasyncの負荷をvueします

バックエンドからフォームをロードしますか？この例をご覧ください。

検証付き登録フォーム

検証とエラーメッセージを使用したより完全な例

ネストされたプロパティを備えた登録フォームの例

フォームモデルキーが別のキーの下にネストされている上記の上記の登録フォーム

UMDデモ

上記のすべての例は、このレポのexamplesフォルダーのUMDバージョンを使用して複製されます。

最初のデモのオンラインバージョン

特徴

• HTML要素またはVUEコンポーネントをサポートします
• 小さい（ 32K圧縮なし、 6.5K gzipted）
• 注釈と検証のための標準化されたJSONスキーマ（AJVによる）
• レイアウトは、データ構造から独立しています

ドキュメント

gitbook

使用法

1つのフィールドを使用した基本的な例

UMDバージョンを使用するには、上記のすべてのデモがUMDバージョンを使用して複製されるexamplesフォルダーをご覧ください

デモを参照してください

 < template >
    < vue-form-json-schema
      v-model = "model"
      : schema = "schema"
      : ui-schema = "uiSchema"
    >
  </ vue-form-json-schema >
</ template >

< script >
  export default {
    data ( ) {
      return {
        // An object which holds the form values
        model : { } ,
        // A valid JSON Schema object
        schema : {
          type : 'object' ,
          properties : {
            firstName : {
              type : 'string' ,
            } ,
          } ,
        } ,
        // Array of HTML elements or Vue components
        uiSchema : [ {
          component : 'input' ,
          model : 'firstName' ,
          // Same API as [Vue's render functions](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)
          fieldOptions : {
            class : [ 'form-control' ] ,
            on : [ 'input' ] ,
            attrs : {
              placeholder : 'Please enter your first name' ,
            } ,
          } ,
        } ] ,
      } ;
    }
  } ;
< / script >

依存関係

AJV

JSONスキーマと内部検証を使用したフォーム検証用

ロダッシュ

パッケージ全体でget 、 set 、 mergeが使用されます。バンドルサイズは非常に重要であり、常に考慮されているため、絶対的な必需品のみを含めるためにLodashを大幅に剥ぎ取る

vue

v2.5.9でテストされましたが、おそらく任意のバージョンで動作します> = v2.4.0

トト

• テストを書きます
• I18Nサポートを追加します
  • options.ajv.locale設定で1.15.2に追加されました
• このreadmeを書いてください
• AJVを内部的に使用して検証します。
  • vfs-global Prop ui-schema
  • vfs-component Prop ui-schema
• ドキュメントを書く
• gitbookで公開します