60 lines
1.8 KiB
Vue
60 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
definePageMeta({
|
|
title: 'Menu1 Form',
|
|
icon: 'mdi-animation',
|
|
})
|
|
|
|
const api_data = useFetch('/api/forms/basic/data')
|
|
const api_i18n = useFetch('/api/forms/basic/i18n')
|
|
const api_schema = useFetch('/api/forms/basic/schema')
|
|
const api_uischema = useFetch('/api/forms/basic/uischema')
|
|
|
|
// In Vue 3, markRaw is used directly without needing to import it from a specific package
|
|
// const renderers = markRaw([
|
|
// ...extendedVuetifyRenderers,
|
|
// // here you can add custom renderers
|
|
// ]);
|
|
|
|
// Using ref for reactive data in Vue 3
|
|
const data = ref(api_data) // You'll need to replace this with your actual data
|
|
const schema = ref(api_schema) // Replace with your actual schema
|
|
const uischema = ref(api_uischema) // Replace with your actual UI schema
|
|
|
|
// Event handlers are defined as functions in the setup
|
|
// const onChange = (event) => {
|
|
// data.value = event.data;
|
|
// };
|
|
|
|
const demo = {
|
|
properties: {
|
|
firstName: {
|
|
type: 'string',
|
|
description: "The person's first name.",
|
|
},
|
|
lastName: {
|
|
type: 'string',
|
|
description: "The person's last name.",
|
|
},
|
|
age: {
|
|
description: 'Age in years which must be equal to or greater than zero.',
|
|
type: 'integer',
|
|
minimum: 0,
|
|
},
|
|
},
|
|
}
|
|
|
|
var form = document.getElementById('vuetify-json-forms')
|
|
// form.setAttribute("schema", JSON.stringify(demo));
|
|
|
|
// type="module"
|
|
// src="https://cdn.jsdelivr.net/npm/@chobantonov/jsonforms-vuetify-webcomponent@3.5.1/dist/vuetify-json-forms.min.js"
|
|
</script>
|
|
|
|
<template>
|
|
<vuetify-json-forms id="vuetify-json-forms"></vuetify-json-forms>
|
|
<v-container fluid> {{ data.data }} </v-container>
|
|
<v-container fluid> {{ api_i18n.data }} </v-container>
|
|
<v-container fluid> {{ schema.data }} </v-container>
|
|
<v-container fluid> {{ uischema.data }} </v-container>
|
|
</template>
|