setComponent and vuetify #68
Description
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',
}
}