:validation returns error when reactive prop is used

[mariesvmadrazo]

I have a persistent error that I think is related to FormKit's reactivity. When there is a toggled prop (props.isEnabled) in :validation, FormKit doesn't react with it and shows error in console.

<template>
  <div id="BulkUtilityDrawerEditFieldsInput">
    <FormKit
      v-model="model"
      :type="props.inputType"
      :disabled="!props.isEnabled"
      :class="{ 'disable-click': !props.isEnabled }"
      :validation="validationList"
      :validation-messages="{
        required: `${props.field?.text} must not be empty`
      }"
      autocomplete="false"
    >
      <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
        <slot :name="slot" v-bind="scope" />
      </template>
    </FormKit>
  </div>
</template>
<script setup>
import { computed } from 'vue';

const emit = defineEmits(['update:modelValue']);

const props = defineProps({
  modelValue: String,
  field: Object,
  isEnabled: {
    type: Boolean,
    default: false,
  },
  inputType: {
    type: String,
    default: 'text',
  },
});
const model = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  },
});
const validationList = computed(() => {
  const VALIDATION_SEPARATOR = '|';
  let validationString = `length:0,${maxLength.value}`;
  if (props.isEnabled) {
    validationString += VALIDATION_SEPARATOR + 'required';
  }
  return validationString;
});

When props.isEnabled is toggled to either true or false, the console shows error (see image):

[justin-schroeder]

Hi @mariesvmadrazo — this appears to be related to: #852, let’s track that issue for the time being.