I want to create a vue single page app that uses jsonforms. I want to avoid using a bundler. My code is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue JSONForms no bundler</title>
</head>
<body>
<div id="app">
<nav>
<a href="#" @click.prevent="currentView = 'my_json_forms'">JSON Forms</a>
<a href="#" @click.prevent="currentView = 'my_pre'">Pre</a>
<a href="#" @click.prevent="currentView = 'my_table'">Table</a>
</nav>
<component :is="currentView"></component>
</div>
<!-- Your JavaScript code -->
<script type="module">
import {createApp, defineComponent} from '.esm-browser.js'
import jsonformsvue, {JsonForms} from '/@jsonforms/[email protected]/+esm'
import jsonformsvueVanilla, {
vanillaRenderers
} from '/@jsonforms/[email protected]/+esm';
const MyJsonForms = defineComponent({
components: {JsonForms},
template: `
<div>
<h2>Home Page</h2>
<p>Welcome to the home page.</p>
<json-forms
:data="data"
:renderers="renderers"
:schema="schema"
:uischema="uischema"
@change="onChange"
/>
</div>`
, data() {
return {
renderers: vanillaRenderers,
schema: {
type: "object",
properties: {
name: {type: "string"},
age: {type: "integer"}
}
},
uischema: {
type: "VerticalLayout",
elements: [
{type: "Control", scope: "#/properties/name"},
{type: "Control", scope: "#/properties/age"}
]
},
data: {name: "John", age: 30}
}
}, methods: {
onChange(event) {
this.data = event.data;
},
},
});
const MyPre = defineComponent({
template: `
<div>
<h2>About Page</h2>
<p>This is a simple Vue SPA.</p>
<pre>{{ data }}</pre>
</div>`, data() {
return {
data: {name: "John", age: 30}
}
}
});
const MyTable = defineComponent({
template: `
<div>
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
</thead>
<tr v-for="(item,idx) in data" data-idx="{{idx}}">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</table>
</div>
`,
data() {
return {
data: [{name: "John", age: 30}]
}
}
})
createApp({
components: {
'my_json_forms': MyJsonForms,
'my_pre': MyPre,
'my_table': MyTable,
},
data() {
return {
currentView: 'home',
};
}
}).mount('#app');
</script>
</body>
</html>
While the page renders OK in Pre & Table Tabs, the JSON Forms tab comes back empty, Now JsonForms seems to have beer registered, because it I mess up with the schema (e.g. change "object" to Abject" )I get errors.
I want to create a vue single page app that uses jsonforms. I want to avoid using a bundler. My code is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue JSONForms no bundler</title>
</head>
<body>
<div id="app">
<nav>
<a href="#" @click.prevent="currentView = 'my_json_forms'">JSON Forms</a>
<a href="#" @click.prevent="currentView = 'my_pre'">Pre</a>
<a href="#" @click.prevent="currentView = 'my_table'">Table</a>
</nav>
<component :is="currentView"></component>
</div>
<!-- Your JavaScript code -->
<script type="module">
import {createApp, defineComponent} from 'https://cdn.jsdelivr/npm/vue/dist/vue.esm-browser.js'
import jsonformsvue, {JsonForms} from 'https://cdn.jsdelivr/npm/@jsonforms/[email protected]/+esm'
import jsonformsvueVanilla, {
vanillaRenderers
} from 'https://cdn.jsdelivr/npm/@jsonforms/[email protected]/+esm';
const MyJsonForms = defineComponent({
components: {JsonForms},
template: `
<div>
<h2>Home Page</h2>
<p>Welcome to the home page.</p>
<json-forms
:data="data"
:renderers="renderers"
:schema="schema"
:uischema="uischema"
@change="onChange"
/>
</div>`
, data() {
return {
renderers: vanillaRenderers,
schema: {
type: "object",
properties: {
name: {type: "string"},
age: {type: "integer"}
}
},
uischema: {
type: "VerticalLayout",
elements: [
{type: "Control", scope: "#/properties/name"},
{type: "Control", scope: "#/properties/age"}
]
},
data: {name: "John", age: 30}
}
}, methods: {
onChange(event) {
this.data = event.data;
},
},
});
const MyPre = defineComponent({
template: `
<div>
<h2>About Page</h2>
<p>This is a simple Vue SPA.</p>
<pre>{{ data }}</pre>
</div>`, data() {
return {
data: {name: "John", age: 30}
}
}
});
const MyTable = defineComponent({
template: `
<div>
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
</thead>
<tr v-for="(item,idx) in data" data-idx="{{idx}}">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</table>
</div>
`,
data() {
return {
data: [{name: "John", age: 30}]
}
}
})
createApp({
components: {
'my_json_forms': MyJsonForms,
'my_pre': MyPre,
'my_table': MyTable,
},
data() {
return {
currentView: 'home',
};
}
}).mount('#app');
</script>
</body>
</html>
While the page renders OK in Pre & Table Tabs, the JSON Forms tab comes back empty, Now JsonForms seems to have beer registered, because it I mess up with the schema (e.g. change "object" to Abject" )I get errors.
Share Improve this question edited Mar 17 at 12:30 kissu 47k16 gold badges90 silver badges189 bronze badges asked Mar 17 at 11:31 johnmermjohnmerm 7169 silver badges16 bronze badges1 Answer
Reset to default 0the <dispatch-renderer /> component was not mounted. I think you should use defineComponent api with function syntax.
exp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue JSONForms no bundler</title>
<link href="https://cdn.jsdelivr/npm/@jsonforms/[email protected]/vanilla.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script type="module">
import { createApp, defineComponent, h, reactive } from 'https://cdn.jsdelivr/npm/[email protected]/+esm';
import { JsonForms, DispatchRenderer } from 'https://cdn.jsdelivr/npm/@jsonforms/[email protected]/+esm';
import { vanillaRenderers } from 'https://cdn.jsdelivr/npm/@jsonforms/[email protected]/+esm';
const App = defineComponent({
setup() {
const formData = reactive({
schema: {
type: "object",
properties: {
name: { type: "string" },
age: { type: "integer" }
}
},
uischema: {
type: "VerticalLayout",
elements: [
{ type: "Control", scope: "#/properties/name" },
{ type: "Control", scope: "#/properties/age" }
]
},
data: { name: "John", age: 30 },
renderers: Object.freeze([...vanillaRenderers]),
});
return () => h(JsonForms, {
schema: formData.schema,
uischema: formData.uischema,
data: formData.data,
renderers: Object.freeze([...vanillaRenderers]),
onChange(event) {
console.log(event.data)
}
});
}
});
const app = createApp(App);
app.mount('#app');
</script>
</body>
</html>