Question

我在商店中有一个对象，并将其用作组件中的计算属性。那里我有一个带有v-model ='obj.name'的输入形式。我有一个更改此输入的方法，该调度操作用于将该obj发送给API并在成功响应时调用mutation以更新状态。问题是更改事件触发两次。

我更新了输入，变更触发方法，我获得了成功的响应，并且变更触发方法又一次成功。

这是我的输入内容

    <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))
        },

我收到了成功的警报，将其关闭后，更改事件再次被触发

Answer 1

我认为这是因为v模型是双向的，并且每当v模型值更改时@change都会触发。因此，@ change在用户更新值时触发一次，并在第二次触发，因为值是由您的vuex操作更新的。

v模型触发两次更改事件

1 个答案: