Nuxt•4d ago

Update modal does not re-open with latest data

I have this snippet in my update modal

const props = defineProps<{
  open: boolean;
  caseData: Case;
}>();

const emit = defineEmits<{
  "open-state-change": [open: boolean];
  "case-updated": [updatedCase: Case];
  error: [error: Error];
}>();

const { $api } = useNuxtApp();
const isCreatePracticeAreaModalOpen = ref(false);

const { data: practiceAreas, status: practiceAreaStatus } =
  $api.practiceAreas.listPracticeAreas();
const { data: caseStages, status: caseStagesStatus } =
  $api.cases.listCaseStages();

const {
  handleSubmit,
  setFieldValue,
  values: formValues,
  resetForm,
} = useForm({
  validationSchema: caseForms.updateCaseFormSchema,
  initialValues: {
    caseName: props.caseData.name,
    caseDescription: props.caseData.description,
    caseNumber: props.caseData.caseNumber,
    practiceAreaId: props.caseData.practiceArea.id,
    caseStage: props.caseData.stage.id,
    dateOpened: props.caseData.dateOpened,
    statuteOfLimitations: props.caseData.statuteOfLimitations as string,
  },
});

watch([props], () => {
  if (props.open) resetForm({ values: props.caseData });
});

const props = defineProps<{
  open: boolean;
  caseData: Case;
}>();

const emit = defineEmits<{
  "open-state-change": [open: boolean];
  "case-updated": [updatedCase: Case];
  error: [error: Error];
}>();

const { $api } = useNuxtApp();
const isCreatePracticeAreaModalOpen = ref(false);

const { data: practiceAreas, status: practiceAreaStatus } =
  $api.practiceAreas.listPracticeAreas();
const { data: caseStages, status: caseStagesStatus } =
  $api.cases.listCaseStages();

const {
  handleSubmit,
  setFieldValue,
  values: formValues,
  resetForm,
} = useForm({
  validationSchema: caseForms.updateCaseFormSchema,
  initialValues: {
    caseName: props.caseData.name,
    caseDescription: props.caseData.description,
    caseNumber: props.caseData.caseNumber,
    practiceAreaId: props.caseData.practiceArea.id,
    caseStage: props.caseData.stage.id,
    dateOpened: props.caseData.dateOpened,
    statuteOfLimitations: props.caseData.statuteOfLimitations as string,
  },
});

watch([props], () => {
  if (props.open) resetForm({ values: props.caseData });
});

updating works, and the modal closes. however, when i re-open the modal, the initial data is the stale one and not the fresh

2 Replies

kapa.ai•4d ago

Hi @the_aceix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your issue is that when you re-open the modal, the form's initial values are not updated with the latest caseData. This is a common reactivity pitfall in Vue/Nuxt when using the Composition API and destructuring props or initializing state from props. Key points from the knowledge sources: - Do not destructure props: If you destructure or copy prop values into local state, you lose reactivity. Instead, always use the prop directly or use toRefs(props) to maintain reactivity. If you need to react to prop changes, set up a watcher on the prop itself, not on a copy or destructured value [Nuxt 3/Vue 3 Reactivity issue]. - Watching props: When using watch, make sure you are watching the prop (or its ref) directly, not a value or a copy. For example, watch(() => props.caseData, ...) will react to changes in caseData [Toggle modal when changing text prop dynamically]. How to fix: 1. Watch the specific prop: Instead of watch([props], ...), watch () => props.caseData directly. 2. Reset form with latest values: When caseData changes and the modal is open, call resetForm with the new values. Example fix:

watch(
  () => props.caseData,
  (newCaseData) => {
    if (props.open && newCaseData) {
      resetForm({
        values: {
          caseName: newCaseData.name,
          caseDescription: newCaseData.description,
          caseNumber: newCaseData.caseNumber,
          practiceAreaId: newCaseData.practiceArea.id,
          caseStage: newCaseData.stage.id,
          dateOpened: newCaseData.dateOpened,
          statuteOfLimitations: newCaseData.statuteOfLimitations as string,
        }
      });
    }
  },
  { immediate: true, deep: true }
);

watch(
  () => props.caseData,
  (newCaseData) => {
    if (props.open && newCaseData) {
      resetForm({
        values: {
          caseName: newCaseData.name,
          caseDescription: newCaseData.description,
          caseNumber: newCaseData.caseNumber,
          practiceAreaId: newCaseData.practiceArea.id,
          caseStage: newCaseData.stage.id,
          dateOpened: newCaseData.dateOpened,
          statuteOfLimitations: newCaseData.statuteOfLimitations as string,
        }
      });
    }
  },
  { immediate: true, deep: true }
);

Why this works:
This ensures that every time caseData changes (for example, when you re-open the modal with new data), the form is reset with the latest values. Avoid copying props into local state unless you have a specific reason and know how to sync them properly [Nuxt 3/Vue 3 Reactivity issue]. If you still see stale data, double-check that the parent is passing the latest caseData to the modal when opening it. --- Summary:
- Watch the prop directly, not a copy. - Reset the form with the latest values when the prop changes and the modal is open. - Avoid destructuring or copying props for reactivity reasons. Let me know if you need a more specific code example! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@448141117368827905> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Update modal does not re-open with latest data

Did you find this page helpful?