Is it possible to use conditional logic on child elements in formkit?

Question

Is it possible to use conditional logic on child elements in formkit?

I am a bit confused about how this process functions.

Currently, I am utilizing schema to create an address auto complete configuration.

My goal is to have the option to display or hide the fields for manual input.

This is the current appearance of the form: https://i.sstatic.net/zvZg4.png

Initially, I want the blue section to remain hidden and only appear when Can't find your address? is selected

Here is my existing code:

{
    $formkit: InputType.GROUP,
    name: 'address',
    label: label,
    children: [
        // Code continues...
    ],
};

I am troubleshooting by attempting to change the text color from blue to red based on the status of the $manual option

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',
   },
},

However, despite my efforts, the color does not seem to change when selecting the manual option.
It appears as though the change is not being recognized.

I am referencing this example in playground which demonstrates what I am trying to achieve but it is not working properly for me.

What could be the issue?

typescript vue.js formkit

Answer 1

Answer №1

Upon further investigation and experimentation, it has been discovered that the here it is necessary to include both the v-model and data attributes.

In order for functionality to be initiated, I had to make the following adjustments:

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

Answer 2

Upon further investigation and experimentation, it has been discovered that the here it is necessary to include both the v-model and data attributes.

In order for functionality to be initiated, I had to make the following adjustments:

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

Is it possible to use conditional logic on child elements in formkit?

Answer №1

Similar questions

"Define a TypeScript function type that can return either an object or a string depending on whether it succeeds or fails

Angular 4 HTTP Requests Failing to Retrieve JSON Data

Vitest's behavior shows variance when compared to compiled JavaScript

Retrieve information from a URL to transmit to a different page in NextJS using Typescript and AppRouter

"Implementing drag and drop functionality in Vue.js without the need for a

Recursive array generation

What is the best way to remove a selected item from an array in Vuejs when it has been clicked

What steps should I follow to perform unit testing on a Quasar application with Jest?

Encountering the error "When calling reset() in Vue JS, getting the error message 'Cannot read property 'map' of undefined' in the following file"

Exploring nested JSON data in Vue.js

Define the data type for the toObject function's return value

The user authentication service indicates that no user is currently logged in

JavaScript format nested data structure

Firebase causing Nuxt async to fail on page reload

What's the best way to add animation to the send icon while hovering over the button?

Parameters in Typescript decorators

What is the best way to display the currently selected value in a Vue select drop down?

The EChart chart in Vue is not updating properly due to a malfunctioning watch feature

Having trouble updating the vue bootstrap table after sending data from child to parent component

I'm experiencing an issue where posts are duplicated based on the number of comments they have. Any suggestions on how to