英文:
How to load from database FormKit schema and generate form using Laravel - Inertia js ans Vue 3
问题
const schema = JSON.parse(props.form.json_schema)
英文:
here is my goal: I have a simple form for testing purpose. I defined and saved to database the Formkit schema definition and I want to load it from the db and generate the form on the page. This is the simple schema:
[
{
$formkit: 'email',
label: 'Email address',
validation: 'required'
},
{
$formkit: 'select',
name: 'role',
label: 'Ruolo',
options: {
sa: 'Super Admin',
manager: 'Manager',
user: 'User'
},
help: 'Insert your job role?'
validation: 'required'
}
]
I want to load this schema from db and preview it in a page.
In my Laravel controller:
public function preview(Form $form) {
return Inertia::render('Forms/Anteprima', [
'form' => $form
]);
}
Then the Anteprima.vue file
<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import PortalMenu from '@/Components/PortalMenu.vue';
import { Head, Link } from '@inertiajs/vue3';
import '@formkit/themes/genesis'
const props = defineProps({
form: Array
})
const schema = JSON.parse(props.form.json_schema)
// const schema = [
// {
// $formkit: 'email',
// label: 'Email address',
// validation: 'required'
// },
// {
// $formkit: 'select',
// name: 'ruolo',
// label: 'Ruolo',
// options: {
// sa: 'Super Admin',
// manager: 'Editor',
// user: 'User'
// },
// help: 'Insert your job role?',
// validation: 'required'
// }
// ]
const inviaForm = async (fields) => {
await new Promise((r) => setTimeout(r, 1000))
alert(JSON.stringify(fields))
console.log(fields)
}
</script>
<template>
<Head title="Form schema sample"></Head>
<AuthenticatedLayout>
<template v-slot:navigation><PortalMenu /></template>
<template v-slot:header><div class="pb-3"><h2>Form preview: {{ form.name }}</h2></div></template>
<div class="row">
<FormKit type="form" @submit="inviaForm" submit-label="Invia modulo">
<FormKitSchema :schema="schema" />
</FormKit>
</div>
</AuthenticatedLayout>
</template>
If I uncomment the "local" definition of the schema it works, but if I use the string passed from the db I'm not able to get it.
I tried in different ways: with JSON.parse I get an error about json structure, if I remove JSON.parse it shows the json schema string on the page and not the form. I tried also removing "[" and "]" from the db without success.
答案1
得分: -2
根据您提供的代码，看起来您正在将模式作为 JSON 字符串从数据库传递给 Anteprima.vue 组件。为了在组件中使用模式，您需要将 JSON 字符串解析为实际的 JavaScript 对象。
以下是您的代码的更新版本，应该可以正常工作：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<script setup>
import { defineProps } from 'vue';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import PortalMenu from '@/Components/PortalMenu.vue';
import { Head, Link } from '@inertiajs/vue3';
import '@formkit/themes/genesis';
const props = defineProps({
form: Object // 假设 'form' 是 props 中的一个对象
});
const schema = JSON.parse(props.form.json_schema);
const inviaForm = async (fields) => {
await new Promise((r) => setTimeout(r, 1000));
alert(JSON.stringify(fields));
console.log(fields);
};
</script>
<template>
<Head title="Form schema sample" />
<AuthenticatedLayout>
<template v-slot:navigation><PortalMenu /></template>
<template v-slot:header><div class="pb-3"><h2>Form preview: {{ form.name }}</h2></div></template>
<div class="row">
<FormKit type="form" @submit="inviaForm" submit-label="Invia modulo">
<FormKitSchema :schema="schema" />
</FormKit>
</div>
</AuthenticatedLayout>
</template>
<!-- end snippet -->
请确保来自数据库的 form 对象的 json_schema 属性包含一个有效的 JSON 字符串，如果数据库中的 json_schema 字段包含方括号 [ ]，则在解析 JSON 字符串之前应将它们删除。
使用此代码，JSON 字符串应该能够正确解析，表单应该基于从数据库检索的模式生成。
英文:
Based on the code you provided, it seems like you're passing the schema as a JSON string from the database to the Anteprima.vue component. In order to use the schema in the component, you'll need to parse the JSON string into an actual JavaScript object.
Here's an updated version of your code that should work:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<script setup>
import { defineProps } from 'vue';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import PortalMenu from '@/Components/PortalMenu.vue';
import { Head, Link } from '@inertiajs/vue3';
import '@formkit/themes/genesis';
const props = defineProps({
form: Object // Assuming 'form' is an object in the props
});
const schema = JSON.parse(props.form.json_schema);
const inviaForm = async (fields) => {
await new Promise((r) => setTimeout(r, 1000));
alert(JSON.stringify(fields));
console.log(fields);
};
</script>
<template>
<Head title="Form schema sample" />
<AuthenticatedLayout>
<template v-slot:navigation><PortalMenu /></template>
<template v-slot:header><div class="pb-3"><h2>Form preview: {{ form.name }}</h2></div></template>
<div class="row">
<FormKit type="form" @submit="inviaForm" submit-label="Invia modulo">
<FormKitSchema :schema="schema" />
</FormKit>
</div>
</AuthenticatedLayout>
</template>
<!-- end snippet -->
Make sure that the json_schema property of the form object from the database contains a valid JSON string representing the schema. If the json_schema field in the database includes square brackets [ ], you should remove them before parsing the JSON string.
With this code, the JSON string should be parsed correctly, and the form should be generated based on the schema retrieved from the database.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论