setComponent and vuetify

[dmitry-saritasa]

I'm trying to render JSON UI Editor with Vuetify components using .setComponent call but it gives me no effect:

JsonEditor.setComponent('textarea', 'v-textarea');

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

<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import JsonEditor from 'vue-json-ui-editor';

JsonEditor.setComponent('textarea', 'v-textarea');

const SCHEMA = {
  $schema:     'http://json-schema.org/draft-07/schema#',
  type:        'object',
  title:       'Json-Editor-Demo',
  description: 'Demo for vue-json-ui-editor using element-ui ',
  properties:  {
    name: {
      type:      'string',
      minLength: 8,
      maxLength: 80,
      title:     'String',
      attrs:     {
        placeholder: 'Your Full Name',
        title:       'Please enter your full name',
      },
    },
    sub: {
      title:       'SubTitle',
      description: 'SubDescription',
      type:        'object',
      properties:  {
        sName: {
          minLength: 8,
          maxLength: 80,
          title:     'SubName',
          attrs:     {
            placeholder: 'Sub Full Name',
            title:       'Please enter your full name',
          },
        },
        sUrl: {
          title:  'SubUrl',
          format: 'uri',
        },
        sub2: {
          type:        'object',
          title:       'Sub2Title',
          description: 'Sub2Description',
          properties:  {
            sName2: {
              format:  'regex',
              title:   'Sub2Name',
              pattern: '*',
            },
            sAge: {
              type:  'integer',
              title: 'Sub2Age',
            },
          },
          required: ['sName2'],
        },
      },
      required: ['sUrl'],
    },
    lists: {
      type:  'string',
      title: 'List',
      enum:  [ 'Daily New', 'Promotion' ],
      attrs: {
        placeholder: 'Select your list subscription',
        title:       'Please select your list subscription',
      },
    },
    lists2: {
      type:  'array',
      title: 'List2',
      anyOf: [
        { value: 'daily', label: 'Daily New' },
        { value: 'promotion', label: 'Promotion' },
      ],
      attrs: {
        placeholder: 'Select your list subscription',
        title:       'Please select your list subscription',
      },
    },
    lists3: {
      type:  'array',
      title: 'List3',
      oneOf: [
        { value: 'daily', label: 'Daily New' },
        { value: 'promotion', label: 'Promotion' },
      ],
    },
    source: {
      type:        'string',
      maxLength:   120,
      title:       'Source',
      description: 'Ex. Using the NPM Search Engine',
      attrs:       {
        type:        'textarea',
        placeholder: 'How did you hear about us?',
      },
    },
    rate: {
      type:    'number',
      title:   'Rate',
      default: 2,
      attrs:   {
        type:         'rate',
        'allow-half': true,
      },
    },
    color: {
      type:    'string',
      title:   'Color',
      default: '#409EFF',
      attrs:   {
        type: 'color',
      },
    },
    agree: {
      type:        'boolean',
      title:       'Agree',
      description: 'You agree to receive occasional updates and special offers for vue-json-schema updates.',
      default:     false,
      attrs:       {
        type: 'switch',
      },
    },
  },
  additionalProperties: false,
  required:             [ 'name', 'rate', 'lists' ],
};


@Component({
  components: {
    JsonEditor,
  },
})
export default class AdminPage extends Vue {
  schema = SCHEMA
  model = {
    name: 'Test2',
  }
}

[Marcus-Rise]

try `
import {VForm, VLabel, VTextField} from "vuetify/lib";

JsonEditor.setComponent('form', VForm);
JsonEditor.setComponent('text', VTextField);
JsonEditor.setComponent('number', VTextField);

`

[donghoon-song]

try ` import {VForm, VLabel, VTextField} from "vuetify/lib";

JsonEditor.setComponent('form', VForm);
JsonEditor.setComponent('text', VTextField);
JsonEditor.setComponent('number', VTextField);

`

It works :)