v-model에서 변경 이벤트가 두 번 발생함

v-model에서 변경 이벤트가 두 번 발생함

오브젝트가 준비되어 있으며 컴포넌트에서 계산 속성으로 사용합니다.v-model= 'obj.name'을 입력한 양식이 있습니다.그리고 이 입력을 변경하는 방법, 즉 이 obj를 API로 전송하기 위한 디스패치 액션과 성공적인 응답에 대한 업데이트 상태의 콜 변환 방법이 있습니다.문제는 변경 이벤트가 두 번 발생한다는 것입니다.

입력, 변경 화재에 대한 방법, 성공적인 응답 및 변경 화재에 대한 방법을 다시 업데이트합니다.

제 의견은 다음과 같습니다.

    <v-text-field dense
      v-model="object.name"
      @change="submitForm"                                              
 ></v-text-field>

computed:{
    ...mapGetters(['object']),
}

방법:

  methods:{
            submitForm(){
               {
                   return this.$store.dispatch('updateObject', this.object)
                        .then(() => {
                            alert('Data is saved')
                        })
                        .catch(error => {
                            alert(`Data is not saved. ${error}`)
                        })

            },
}

제 행동은 이렇습니다.

 updateObject(context, object){
            return axios
                .put(`/api/object/${context.state.objectId}`,  object)
                .then((response) => {
                    console.log(response)
                    context.commit('updateObject', order)
                })
                .catch(error => console.log(error))
        },

알림이 성공적으로 수신되었습니다. 알림을 닫은 후 변경 이벤트가 다시 발생합니다.

v-model은 양방향이며 v-model 값이 변경될 때마다 @change가 발생하기 때문이라고 생각합니다.따라서 @change는 사용자가 값을 갱신할 때 한 번 호출되며 vuex 액션에 의해 값이 갱신되기 때문에 두 번째로 호출됩니다.

언급URL : https://stackoverflow.com/questions/58815105/v-model-fires-change-event-twice