Conditional Node In Formkit Repeater

Question

I am trying to do a conditional render of a datepicker in a formkit repeater. It's unclear to me how I am supposed to get the node on the child.

The $index should be avaliable to all childern of the reaperter per the docs. Thanks for your help!

See playground

<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>

Answer 1

Use $value to get the current element's value. In your case, the correct value of the datepicker subfield if is: '$value.hasDate'.

Updated playground.