I am using vee-validation but my initial values not geeting update

[mmejaz]

What happened?

i have create a form whne i click on update button it pulating the data in the form field by initials value. when i close the form and click on next edit button the initials value variable updating i have in console, but the form not update the form fields, it is still showing the old values in the form

Reproduction steps

Categories Page

1. Home
2. Starter Page

Featured

              <div class="col-md-6 text-right">
                <Button type="primary" @click="showDrawer">Open</Button>
              </div>
            </div>
          </div>
          <Drawer
            v-model:open="open"
            :title="editing ? 'Edit Category' : 'Create Category'"
            placement="right"
            :maskClosable="false"
            @after-open-change="afterOpenChange"
          >
            <Form
              @submit="createCategory"
              :validation-schema="schema"
              v-slot="{ errors }"
              ref="form"
              :initial-values="formValues"
            >
              <div class="form-group">
                <label for="categoryName">Category Name</label>
                <Field
                  :class="{ 'is-invalid': errors.name }"
                  type="text"
                  name="name"
                  class="form-control"
                  id="categoryName"
                />

                <small id="emailHelp" class="invalid-feedback">{{
                  errors.name
                }}</small>
              </div>

              <button type="submit" class="btn btn-primary">Save</button>
            </Form>
          </Drawer>
          <div class="card-body">
            <Table
              size="small"
              :dataSource="dataSource"
              :columns="columns"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script setup> import { Button, Table, Drawer, Popconfirm, notification, } from "ant-design-vue"; import { DeleteOutlined, EditOutlined } from "@ant-design/icons-vue"; import axios from "axios"; import { onMounted, h, Fragment, ref, watch } from "vue"; import { Form, Field } from "vee-validate"; import * as yup from "yup"; const dataSource = ref([]); const open = ref(false); const editing = ref(false); const formValues = ref({ name: "" }); const getCategories = () => { axios.get("/api/get-categories").then((response) => { dataSource.value = response.data; }); }; onMounted(() => { getCategories(); }); const schema = yup.object({ name: yup.string().required(), }); const createCategory = async (values, { resetForm }) => { try { axios.post("/api/create-category", values).then((response) => { resetForm(); openNotificationWithIcon("success"); getCategories(); }); } catch (error) { if (error.response && error.response.status === 422) { console.error("Validation error:", error.response.data); } else { console.error("Error creating category:", error); } } }; const openNotificationWithIcon = (type) => { notification[type]({ message: "Category", description: "Data Inserted Successfully.", }); }; const afterOpenChange = (bool) => { console.log("open", bool); }; const showDrawer = () => { editing.value = false; open.value = true; }; const onDeleteConfirm = (record) => { console.log("Delete record:", record); }; const onEditClick = (record) => { editing.value = true; if (formValues) { console.log("form values------------------", formValues); } formValues.value = { name: record.name, }; open.value = true; // Open the drawer console.log("updated form values----", formValues); }; const onDeleteClick = (record) => { const deleteIcon = h( Popconfirm, { title: "Are you sure you want to delete this item?", okText: "Yes", cancelText: "No", onConfirm: () => onDeleteConfirm(record), }, () => { return h(DeleteOutlined, { style: { cursor: "pointer", color: "#ff4d4f", marginRight: "8px", }, }); } ); const editIcon = h(EditOutlined, { style: { cursor: "pointer", color: "#1890ff", marginRight: "8px", }, onClick: () => onEditClick(record), }); return h(Fragment, [deleteIcon, editIcon]); }; const columns = [ { title: "Name", dataIndex: "name", key: "name", }, { title: "Action", key: "action", customRender: ({ record, index }) => { return onDeleteClick(record); }, }, ]; watch(formValues, (newValue) => { console.log("Form values updated:", newValue); }); </script>

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

i am working on local host

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

Initial values are not reactive. In order to set the values when they load form an API you can use:

// Your `ref` attribute ref 
form.value.setValues({
  // Update values
});

// or
form.value.resetForm({
  values: {
     // New values
  }
});