Блог

Я использую Vue3 composition API и попытался сбросить форму с помощью Object.assign. К сожалению, он не сбрасывает форму при наличии вложенных свойств.

 const initialForm = {
    name: "",
    details: {
        type: ""
    }
};

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

const resetForm = () => {
    Object.assign(form, initialForm);
}
 

Здесь имя сбрасывается, но подробности.тип не сбрасывается. Каким должен быть подход к сбросу формы здесь?

оператор распространения ... , и Object.assign они выполняют только поверхностное копирование.

это означает, что он не изменяет вложенные ссылки. таким details.type образом, from initialForm — это то же самое, что и in form.details.type .

для этого вам необходимо глубоко скопировать / клонировать объект при назначении form . также, когда вы выполняете resetForm .

использование https://lodash.com/docs/4.17.15#cloneDeep

 const initialForm = {
    name: "",
    details: {
        type: ""
    }
};

let form = reactive( _.cloneDeep(initialForm));

const resetForm = () => {
    form =  _.cloneDeep(initialForm) ;
}
 

без внешнего пакета:

 const initialForm = {
    name: "",
    details: {
        type: ""
    }
};

let form = {...initialForm, details : {...initialForm.details} } ;

const resetForm = () => {
    form = {...initialForm, details : {...initialForm.details} } ;
}