如何在Vue Formulate表单schema中使用v-show/v-if实现条件展示

正确实现方式 #

Vue Formulate 的表单 schema 不支持直接将 v-show/v-if 这类 Vue 指令作为配置属性写入，官方内置了专用的条件控制逻辑，实现方式如下：

1. 完全销毁/渲染（等价于 v-if 行为，推荐大多数场景使用）

直接在 schema 节点上添加 if 配置项，值为回调函数，接收当前表单的所有字段值作为入参，返回布尔值控制节点是否渲染：

{
  component: "div",
  style: "display: flex",
  // 表单值变化时会自动触发该函数重新计算
  if: (values) => values.someCondition === true,
  children: [
    {
      type: "currency",
      name: "propertyValue",
      label: "Property value",
      validation: "required",
      validationName: "Property value"
    }
  ]
}

对应你需要根据收入类型展示公司编号字段的场景，写法如下：

{
  component: "div",
  if: (values) => values.primaryIncomeType === 'selfEmployed',
  children: [
    {
      name: "companyNumber",
      type: "text",
      label: "UK company number"
    }
  ]
}

2. 仅隐藏保留DOM（等价于 v-show 行为）

如果需要保留节点DOM仅控制显隐，可以把样式属性写为动态回调函数：

{
  component: "div",
  // 根据表单值动态返回display样式
  style: (values) => `display: ${values.someCondition === true ? 'flex' : 'none'}`,
  children: [/* 子字段配置 */]
}

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