vue-form-json-schema
vue-form-json-schema copied to clipboard
Schema Ref and Font Awesome Component Help in UI Schema
I can't figure out how to do two things: (1) Add a reference to the properties value from the UI schema and (2) add Font Awesome Component. Here is my JSON
{
"schema":{
"type":"object",
"required":[
"project_name"
],
"properties":{
"project_name":{
"type":"string",
"title":"Project Name",
"description":"The name of the building or project"
}
}
},
"uiSchema": [
{
"component": "label",
"fieldOptions": {
"attrs": {
"for": "project_name"
},
"class": [
"font-weight-bold"
],
"domProps": {
"innerHTML": "Name"
}
}
},
{
"component": "div",
"fieldOptions": {
"class": [
"input-group", "mb-3"
]
},
"children": [
{
"component": "div",
"fieldOptions": {
"class": [
"input-group-prepend"
]
},
"children": [
{
"component": "span",
"fieldOptions": {
"attrs": {
"data-toggle": "tooltip",
"data-placement": "right",
"title": "data.schema.properties.project_name.descritpion"
},
"class": [
"input-group-text"
],
"domProps": {
"innerHTML": "i"
}
}
}
]
},
{
"component": "input",
"model": "name",
"errorOptions": {
"class": [
"is-invalid"
]
},
"fieldOptions": {
"attrs": {
"id": "project_name"
},
"class": [
"form-control"
],
"on": [
"input"
]
}
}
]
},
{
"component": "transition",
"fieldOptions": {
"props": {
"name": "fade"
}
},
"children": [
{
"component": "div",
"model": "project_name",
"errorHandler": true,
"displayOptions": {
"model": "project_name",
"schema": {
"not": {
"type": "string"
}
}
},
"fieldOptions": {
"class": [
"alert alert-danger"
]
},
"children": [
{
"component": "div",
"fieldOptions": {
"domProps": {
"innerHTML": "This field is required"
}
}
}
]
}
]
}
]
}
here is how I am loading this file:
<script>
import VueFormJsonSchema from "vue-form-json-schema/dist/vue-form-json-schema.esm.js";
import project from "@/schema/project.json";
export default {
name: "ProjectCreate",
components: {
"vue-form-json-schema": VueFormJsonSchema,
},
data() {
return {
model: {},
state: {},
valid: false,
options: {
castToSchemaType: true,
},
submitted: false,
success: false,
schema: project.schema,
uiSchema: project.uiSchema,
createAccountBtn: "Create Project",
showLoading: false,
};
},
methods: {
onChangeState(value) {
this.state = value;
},
onValidated(value) {
this.valid = value;
},
},
};
</script>
I want the tooltip ui schema element to show the schema property value, so I don't have to retype it, but can't seem to see how to get the value.
The Font Awesome VUE syntax is as follows
<font-awesome-icon icon="info-circle" />
I want to replace my "i" with the font awesome vue component, but I don't know how to refer to a VUE component in the JSON. Any help is appreciated.
Thanks, -- Jorge