32 lines
704 B
Vue
32 lines
704 B
Vue
<script setup lang="ts">
|
|
import { JsonForms } from '@jsonforms/vue'
|
|
import { vuetifyRenderers } from '@jsonforms/vue-vuetify'
|
|
import { useFormBasic } from '~/composables/forms/basic'
|
|
|
|
definePageMeta({
|
|
title: 'Basic Form',
|
|
icon: 'mdi-animation',
|
|
})
|
|
|
|
const { schema, uischema, data } = useFormBasic()
|
|
|
|
const onChange = (event: JsonFormsChangeEvent) => {
|
|
data.value = event.data
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<img alt="Vue logo" src="./assets/logo.png" />
|
|
<h1>JSON Forms Vue 3</h1>
|
|
<div class="myform">
|
|
<json-forms
|
|
:data="data"
|
|
:renderers="vuetifyRenderers"
|
|
:schema="schema"
|
|
:uischema="uischema"
|
|
@change="onChange"
|
|
/>
|
|
</div>
|
|
<pre>{{ data }}</pre>
|
|
</template>
|