[SOLVED] How to properly reset Vue Composition Api's reactive values

Issue

I’m wondering how should I reset a reactive in vuejs setup? (i know if change it to the ref and using view.value will solve this problem, but there should be an answer to this for using reactive)

Solution

You can use Object.assign:

  setup() {
    const initialState = {
      name: "",
      lastName: "",
      email: ""
    };

    const form = reactive({ ...initialState });

    function resetForm() {
      Object.assign(form, initialState);
    }

    function setForm() {
      Object.assign(form, {
        name: "John",
        lastName: "Doe",
        email: "[email protected]"
      });
    }

    return { form, setForm, resetForm };
  }

See it live on codesandbox

credits: taken from here

Answered By – Roland

Answer Checked By – David Goodson (BugsFixing Volunteer)