Vue

by Tobias Järvelöv

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://unpkg.com/vue-form-json-schema@2.2.2/dist/vue-form-json-schema.umd.js"></script>
<div id="app"></div>

CSS

/* Demo CSS for pretty printing objects, not required by vue-form-json-schema */
pre {
  outline: 1px solid #ccc;
  padding: 5px;
  margin: 5px;
}

.string {
  color: #e91e63;
}

.number {
  color: #00bcd4;
}

.boolean {
  color: #ff00ff;
}

.null {
  color: #9e9e9e;
}

.key {
  color: #3753a9;
}

Vue

const template = `
  <div id="example-one" class="container mb-3 mt-3">
    <h1>vue-form-json-schema</h1>
    <h3>Example #1 <small class="text-muted">Minimal example</small></h3>
    <p class="lead">
      <span>A minimal example showing a simple <code>input</code> field.</span>
    </p>

    <vue-form-json-schema
      v-model="model"
      :schema="schema"
      :ui-schema="uiSchema"
      v-on:state-change="onChangeState"
      v-on:validated="onValidated"
    >
    </vue-form-json-schema>

    <hr />

    <h4>Model</h4>
    <pretty-print :value="model"></pretty-print>

    <h4>Schema</h4>
    <pretty-print :value="schema"></pretty-print>

    <h4>UI Schema</h4>
    <pretty-print :value="uiSchema"></pretty-print>

    <h4>State</h4>
    <pretty-print :value="state"></pretty-print>

    <h4>Valid</h4>
    <div>{{ valid }}</div>
  </div>
`;

window.Vue.component('example-one', {
  name: 'example-one',
  template,
  data() {
    return {
      model: {},
      state: {},
      valid: false,
      schema: {
        type: 'object',
        properties: {
          firstName: {
            type: 'string',
          },
        },
      },
      uiSchema: [
        {
          component: 'input',
          model: 'firstName',
          fieldOptions: {
            class: ['form-control'],
            on: ['input'],
            attrs: {
              placeholder: 'Please enter your first name',
            },
          },
        },
      ],
    };
  },
  methods: {
    onChangeState(value) {
      this.state = value;
    },
    onValidated(value) {
      this.valid = value;
    },
  },
});

// The component below is just used for the demo

window.Vue.component('pretty-print', {
  name: 'JsonPrettyPrint',
  template: '<pre v-html="this.prettyPrint(this.value)"></pre>',
  props: {
    value: {
      type: null,
    },
  },
  methods: {
    prettyPrint(json) {
      if (json) {
        const stringified = JSON.stringify(json, null, 2);
        const stringifiedReplaced =...