vjsf.js库:根据从另一个字段中选择的值动态显示表单字段

Question

我正在为vue.js表单使用vjsf库(https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/)。我正在尝试动态显示表单的一个字段：memberStatusChange应仅在选择了selectcallDisposition的特定值时显示。不幸的是，它不起作用。我希望能找到如何实现这一功能的建议。表单架构如下。谢谢

{
"id": "https://test.com",
"$schema": "http://json-schema.org/draft-06/schema#",
"description2": "MemberPrequalification",
"type": "object",
"required": [             
"callDisposition"
],
"properties": {
"callDisposition": {
"type": "string",
"title": "Call Disposition",
"x-summary": true,
"x-display": "custom-component",
"enum": [
"Did not call",
"Engaged - Callback Requested - Snoozed",
"Engaged - Completed",
"Engaged - Not Completed",
"Engaged - No Action Needed",
"Engaged - Member Declined"
]
},
"memberStatusChange": {
"type": "string",
"title": "Member Status Change",
"x-if": "parent.value.callDisposition?.toString() === 'Engaged - Completed'",
"x-display": "custom-component",
"enum": [
"Agreed",
"Declined",
"Ineligible - Medical Criteria",
"Ineligible - Coverage",
"Deceased"
]
}
}
}

Answer 1

我实现了这个解决方法，而不是使用库内置功能：无法根据另一个输入的值动态地使用x-if。我最终将功能附加到输入值

添加displayStatus((以更改事件：

<v-jsf
:disabled="context.disabled"
:model-key="context.modelKey"
:options="evaluateOptions(context)"
:required="context.required"
:rules="context.rules"
:schema="JSON.parse(JSON.stringify(context.schema))"
:value="context.value"
@change="displayStatus"
@input="context.on.input">
</v-jsf>

选项值：

options: {
context: {
displayStatus: false,
memberStatusChangeActive: "Completed"
},
summary: false,
disableAll: false,
markdownit: {
html: true
}
}

架构：

{
"id": "https://test.com",
"$schema": "http://json-schema.org/draft-06/schema#",
"description2": "MemberPrequalification",
"type": "object",
"properties": {
"callDisposition": {
"type": "string",
"title": "Call Disposition",
"x-summary": true,
"x-display": "custom-component",
"enum": [
"Did not call",
"Engaged - Callback Requested - Snoozed",
"Completed"       
]
},
"memberStatusChange": {
"type": "string",
"x-summary": true,
"title": "Member Status Change",
"x-if": "context.displayStatus",
"enum": [
"Agreed",
"Declined"                      
]
}
}
}

功能：

methods: {
displayStatus() {
if (typeof this.form.callDisposition != "undefined"
&& this.form.callDisposition === this.options.context.memberStatusChangeActive) {
this.options.context.displayStatus = true;
} else if (typeof this.form.callDisposition != "undefined"
&& this.form.callDisposition !== this.options.context.memberStatusChangeActive) {
this.options.context.displayStatus = false;
}
}
}