FormKit Repeater中Datepicker条件渲染问题咨询

我尝试在FormKit Repeater组件中实现Datepicker的条件渲染，但不清楚如何正确获取子节点的值。根据FormKit官方文档，$index应该对Repeater的所有子节点可用，但我的代码无法正常触发条件渲染。

以下是我的代码示例：

<script setup>
import { FormKitSchema } from "@formkit/vue";
import { ref, computed } from "vue";

const schema = [
  {
    $formkit: 'repeater',
    name: 'users',
    children: [
      {
        $formkit: 'text',
        name: 'email',
        // $index is available to children.
        label: 'Email',
      },
      {
        $formkit: "checkbox",
        name: "hasDate",
        label: "Has date?",
      },
      {
        $formkit: 'datepicker',
        name: 'date',
        if: '$users[$index].$hadDate'
      }
    ],
  }
];

const data = ref();

const handleSubmit = () => alert("Valid submit!");
</script>

<template>
<FormKit type="form" v-model="data" @submit="handleSubmit">
  <FormKitSchema :schema="schema" :data="data" />
</FormKit>

<pre>
{{ data }}
</pre>
</template>

问题分析与修正方案 #

你的代码中有两处关键错误导致条件渲染失效：

1. 字段名拼写错误：Checkbox的name是hasDate，但条件中误写为$hadDate（多了不必要的$前缀且拼写错误）。
2. 冗余的父节点访问：在Repeater的子节点中，不需要通过$users[$index]来访问当前项的字段，FormKit提供了更直接的上下文变量：
   • 使用$hasDate可直接获取当前Repeater项中hasDate字段的值
   • 也可以通过$node.value.hasDate访问当前节点的字段值

修正后的Datepicker配置如下：

{
  $formkit: 'datepicker',
  name: 'date',
  if: '$hasDate'
}

修改后，勾选"Has date?"复选框时Datepicker会自动显示，取消勾选则隐藏，即可实现预期的条件渲染效果。

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