Question

您好，我有这种情况，每次更新用户时，它都不会从用户组件中恢复数据。

当我更新用户之后，现在发生了什么。正确的值会显示出来，然后一毫秒后就会恢复原来的值。

当我console.log时，this。$ store.state.users;它返回日志，第一个是更新的列表，第二个是旧列表。

这是我的store.js

state: {
    users:[],
},
actions:{
    LOAD_USERS({ commit }){
        axios
            .get('api')
            .then(res => {
                if(res.data.success && res.status === 200){
                    commit('SET_USERS', res.data.results.users)
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
},
mutations:{
    SET_USERS(state, users){
        state.users = users
    }
}

这是我的用户。 js

mounted(){
    this.$store.dispatch('LOAD_USERS'); 
},

computed: {
    users(){
        return this.$store.state.users;
    },
    filterUsers: function(){    //variable that bind on the table
        if(this.search != null){
            return this.users.filter((user) => {
                return user.full_name.toLowerCase().match(this.search.toLowerCase())
            });
        } else {
                return this.$store.state.users;     
        }
    }
},

这是我的updateuser.js 正在更新的地方。

created(){
    this.user = this.$store.state.userDetails
    this.roles = this.user.role.split(",");
},

methods: {
    getValidationClass: function (fieldName) {
        const field = this.$v.user[fieldName]
        if (field) {
          return { 'md-invalid': field.$invalid && field.$dirty }
        }
    },

    updateUser: function (user, roles) {
        this.$v.$touch()

        if (!this.$v.$invalid) {
            this.$http.post('api'+user.user_id, {
                first_name: user.first_name,  
                last_name: user.last_name,  
                mobile_number: user.mobile_number,
                full_name: user.first_name + " " + user.last_name,
            });

            this.$http.post('api'+user.user_id, {
                role: roles
            });
            this.$router.push('/user') 
        }
    },
},

将路由器推回到用户组件后，我的数据没有改变。关于如何进行更新的任何建议？

更新vue js后组件数据未更改

0 个答案: