Vue 3 Modal이 다시 열 때 이전 데이터를 가지고 돌아오다

Vue 3 Modal이 다시 열 때 이전 데이터를 가지고 돌아오다

Vue 3과 Vue 4를 사용하고 있습니다.모달(modal)을 열면 메인 오브젝트(car)가 디폴트오브젝트와 같아지고 이러한 디폴트값이 모달의 폼을 채웁니다.아래 코드는 간략화된 버전입니다.

Vuex 모듈:

state: {
    car: {}
    defaults: {
        brand: "",
        color: "",
        value: ""
        ...
    }
},
actions: {
    fillTheCar(state, commit) {
        commit("SET_CAR", state.defaults)
    },
},
mutations: {
    SET_CAR(state, payload) {
        state.car = payload
    }
}
getters: {
    data(state) {
        return state.car    
    }
} 

입력 필드를 입력하면 "car" 개체가 원래대로 업데이트됩니다.모드를 닫았을 때:

methods: {
    closeModal() {
        this.$store.commit("Cars/SET_CAR", {})
        // I have a different Vuex module to control all toggled items
        // such as sidebar, modals, header, etc.
        // I change modal visibility on there.
        this.$store.commit("Toggles/SET_VISIBILITY", {modal: false}
    }
}

파일 구조는 다음과 같습니다.

App.vue 
/ Components
  / Modal.vue
  / Input.vue
  / ...
/ Pages
  / Cars
    / Show.vue
    / Edit.vue
    / Create.vue
    / Delete.vue
    / CarModal.vue

"/cars" 경로로 이동하면 App.vue에 Show.vue가 표시됩니다.

[ Create ]버튼을 클릭하면 [Create]가 표시됩니다.vue. 여기에는 CarModal이 포함됩니다.vue 및 자동차 생성과 관련된 모든 기능이 표시됩니다.

카모달vue에는 CRUD 작업에 필요한 모든 양식 항목이 있으며 /components/Modal에 자신을 주입합니다.표시하다

//components/Modal.vue
<template>
    <teleport to="body">
        <slot name="header"></slot>
        <slot name="content"></slot>
        <slot name="actions"></slot>
    </teleport>
</template>

저는 그 세부 사항들이 도움을 받을 수 있기를 바랍니다.제 고민은 다음과 같습니다.

일부 입력을 입력하고 모달 닫았다가 다시 열면 모달 닫았을 때 차량 객체를 비워두더라도 이전에 채워진 입력의 데이터가 다시 표시됩니다.v-if를 사용하여 Modal, CarModal 및 Create 파일을 삭제해 보았습니다.그것은 아무런 변화도 없었다.:key="Math.floor(Math.random() * 1000000)"를 같은 파일의 컨테이너로 설정하고 모드 클로즈 시 키를 랜덤하게 변경하려고 했습니다.그것도 효과가 없었어요.양식을 재설정할 수 있는 다른 방법이 없습니다.누군가 내가 여기서 놓치고 있는 것을 지적해 주었으면 좋겠다.그나저나, 내가 모달 닫으면 자동차 물체는 비워질 거야.

문제는 당신의 가게에 있다고 생각합니다.

actions: {
    fillTheCar(state, commit) {
        commit("SET_CAR", state.defaults)
    },
},
mutations: {
    SET_CAR(state, payload) {
        state.car = payload
    }
}

모달(modal)을 열면 메인 오브젝트(car)가 디폴트오브젝트와 같아지고 이러한 디폴트값이 모달의 폼을 채웁니다.

그래서 모달 열었을 때, 당신은 전화하고 있다.fillTheCar결과적으로 변환이 호출되는 동작은 다음과 같습니다.state.car같은 물체를 가리키다state.defaults따라서 모달에서 무언가를 변경할 때, 실제로 모달의 속성을 변경할 수 있습니다.state.defaults(Vue Dev Tools에서 쉽게 확인할 수 있습니다)

모드를 닫을 때this.$store.commit("Cars/SET_CAR", {})그냥 정해질 거야state.car새 객체에 적용되지만 다시 열면 다시 로 설정됩니다.state.defaults(이전부터 변경)

TLDR

이것은 Vue/Vuex 문제가 아니라 JavaScript 사용 현황에 관한 문제입니다.

설정하다state.car디폴트 설정으로 하다commit("SET_CAR", state.defaults) 하다commit("SET_CAR", { ...state.defaults })하여 새 됩니다...이렇게 하면 복사된 속성 값을 사용하여 새 개체가 생성됩니다.state.defaults(은 문자열, 등의 참조에 되지 않습니다.) ('비합격', '비합격', '', '비합격

언급URL : https://stackoverflow.com/questions/64183799/vue-3-modal-comes-back-with-old-data-when-reopen