求助：基于vjsf库实现Vue表单字段动态显示功能

我在Vue.js项目中使用vjsf库，想实现表单字段的动态显示逻辑——只有当下拉框callDisposition选中Engaged - Completed时，才显示memberStatusChange字段，但当前的Schema配置没生效，求正确的实现方法。

原Schema配置：

{
  "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"
        ]
     }
  }
}

问题出在x-if的表达式写法上，vjsf中x-if的上下文是表单的整个数据模型，需要用model来访问字段，而非parent.value。修改memberStatusChange字段的x-if配置即可：

1. 修正x-if表达式
   将原来的：

"x-if": "parent.value.callDisposition?.toString() === 'Engaged - Completed'"

替换为：

"x-if": "model.callDisposition === 'Engaged - Completed'"

2. 完整修改后的Schema

{
  "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": "model.callDisposition === 'Engaged - Completed'",
        "x-display": "custom-component",
        "enum": [
           "Agreed",
           "Declined",
           "Ineligible - Medical Criteria",
           "Ineligible - Coverage",
           "Deceased"
        ]
     }
  }
}

说明 #

• model是vjsf在表达式中暴露的全局变量，代表当前表单的完整数据对象，直接用model.字段名即可访问对应值。
• 因为callDisposition是必填字段，初始未选中时memberStatusChange会保持隐藏，选中目标值后自动显示，符合需求逻辑。

内容的提问来源于stack exchange，提问作者kaplievabell