您可以使用 formkit 将条件逻辑应用于子元素吗？答案

【问题标题】：Can you apply conditional logic to child elements with formkit?您可以使用 formkit 将条件逻辑应用于子元素吗？
【发布时间】：2022-11-17 05:59:29
【问题描述】：

我不太确定我是否理解它是如何工作的。

我正在使用架构来构建地址自动完成设置。

我希望能够显示/隐藏手动输入的字段

这是表格当前的样子

最初，我希望隐藏蓝色部分，并且仅在选中 Can't find your address? 时才显示

这是我目前的代码

{
    $formkit: InputType.GROUP,
    name: 'address',
    label: label,
    children: [
      {
        $el: 'section',
        attrs: {
          class: 'mb-8 mt-8',
        },
        children: [
          {
            $el: 'h3',
            attrs: {
              class: `${labelClasses} mb-0`,
            },
            children: [label],
          },
          {
            $el: 'p',
            attrs: {
              class: 'text-sm font-normal mb-2',
            },
            children: [t('form.labels.address.help')],
          },
          {
            $formkit: InputType.ADDRESS_SEARCH,
            label: '',
            name: 'address',
            validation: 'required',
            classes: {
              outer: '!mb-2',
            },
          },
          {
            $formkit: InputType.CHECKBOX,
            label: t('form.labels.address.cant_find'),
            name: 'manual',
          },
          {
            $formkit: InputType.GROUP,
            name: 'address_details',
            label: 'address_details',
            children: [
              {
                $el: 'section',
                attrs: {
                  class: {
                    if: '$manual',
                    then: 'grid grid-cols-2 gap-4 ui-box py-5 px-4 mt-3 text-red-500',
                    else: 'grid grid-cols-2 gap-4 ui-box py-5 px-4 mt-3 text-blue-500',
                  },
                },
                children: [
                  {
                    $formkit: InputType.TEXT,
                    label: t('form.labels.street_address'),
                    name: 'street_address',
                    validation: 'required',
                    classes: {
                      outer: 'col-span-2 !mb-2',
                    },
                  },
                  {
                    $formkit: InputType.TEXT,
                    label: t('form.labels.city'),
                    name: 'city',
                    validation: 'required',
                    classes: {
                      outer: '!mb-2',
                    },
                  },
                  {
                    $formkit: InputType.TEXT,
                    label: t('form.labels.state'),
                    name: 'state',
                    validation: 'required',
                    classes: {
                      outer: '!mb-2',
                    },
                  },
                  {
                    $formkit: InputType.TEXT,
                    label: t('form.labels.country'),
                    name: 'country',
                    validation: 'required',
                    classes: {
                      outer: '!mb-2',
                    },
                  },
                  PostcodeSchema,
                ],
              },
            ],
          },
        ],
      },
    ],
  };

我目前正在根据 $manual 选项的状态将文本颜色从蓝色更改为红色

attrs: {
   class: {
     if: '$manual',
     then: 'grid grid-cols-2 gap-4 ui-box py-5 px-4 mt-3 text-red-500',
     else: 'grid grid-cols-2 gap-4 ui-box py-5 px-4 mt-3 text-blue-500',
   },
},

但是，选择手动选项时，它似乎永远不会改变颜色。
就好像它没有注册更改一样。

我正在使用 this playground example，它似乎可以做我想做的事，但对我不起作用。

我错过了什么？

【问题讨论】：

标签： typescript vue.js formkit

【解决方案1】：

经过更多调查和尝试 here，结果证明您确实需要提供 v-model 和 data 属性。

对我来说，执行以下操作可以让它开始工作

<template>
  <FormKit
    type="form"
    :actions="false"
    id="login"
    @submit="submit"
    v-model="data"
  >
    <FormKitSchema :schema="schema" :data="data" /> 
  </FormKit>
</template>

<script setup lang="ts">
import { Schema } from './schema.ts'

const data = ref({
  address: {
    manual: false,
  },
});
</script>

【讨论】：