Default Values handling VUE form

const defaultValues = computed(() => ({
  rocketType: { value: device.value?.data.brand.id || '', label: device.value?.data.brand.name || '' },
  launchModel: { value: device.value?.data.model.id || '', label: device.value?.data.model.name || '' },
  orbitZone: { value: timezone.value || null, label: timezone.value || null },
  pilotProfile: {
    value: userStore.organization.id || organization.value?.data.id || '',
    label: userStore.organization.name || organization.value?.data.name || '',
    enabled: userStore.organization.enabled || organization.value?.data.enabled || null,
  },
  cargoBay: {
    value: userStore.merchant.id || merchant.value?.data.id || '',
    label: userStore.merchant.name || merchant.value?.data.name || '',
    enabled: userStore.merchant.enabled || merchant.value?.data.enabled || '',
  },
  dockingStation: { value: store.value?.data.id || '', label: store.value?.data.name || '', enabled: store.value?.data.enabled || '' },
  hullCode: device.value?.data.serialNumber || '',
  ignitionWindowStart: getLicenseDatePickerModelValue(iLicenseStartDate.value, timezone.value as Timezones),
  ignitionWindowEnd: getLicenseDatePickerModelValue(iLicenseEndDate.value, timezone.value as Timezones),
}));

const form = useForm({
  defaultValues,
  onSubmit: async ({ value }) => {
    // Do something with form data
    console.log(value)
  },
})

default values

@tanstack/vue-form

reactive

pilotProfile

launchModel

@tanstack/vue-form

defaultValues

useForm