[Vue 警告]：v-on 处理程序中的错误：“TypeError：无法设置未定义的属性‘电子邮件’”

Question

我在使用 Vuex 时遇到了一些问题。事情就是这样。我正在尝试执行 CRUD 的“更新”部分，我能够显示信息但在控制台上，它告诉我这两个错误：

[Vue 警告]：v-on 处理程序中的错误：“TypeError：无法设置未定义的属性 'email'”TypeError：无法设置属性 'email' 未定义的

（我只显示电子邮件字段以缩短代码，但其他字段也会出现相同的错误）。

下面是代码：

更新.vue

<template>
  <v-container id="user-profile" fluid tag="section">
    <v-row justify="center">
      <v-col cols="12" md="8">
        <base-material-card icon="mdi-account-outline">
          <template v-slot:after-heading>
            <div class="font-weight-light card-title mt-2">
              Empleado
              <span class="body-1">— Registro de Empleado</span>
            </div>
          </template>
          <ValidationObserver ref="obs">
            <v-form>
              <v-container class="py-0">
                <v-row>
                  <v-col cols="12" md="4">
                    <VTextFieldWithValidation
                      label="Correo Electrónico"
                      color="secondary"
                      prepend-icon="mdi-at"
                      rules="required|email"
                      v-model="email"
                    />
                  </v-col>
                  <v-col cols="12" class="text-right">
                    <v-btn
                      color="success"
                      class="ml-0"
                      :to="{ name: 'UserList' }"
                    >
                      Atrás
                    </v-btn>
                    <v-btn
                      color="success"
                      class="mr-0"
                      @click.stop.prevent="submit"
                      @click="update()"
                    >
                      Modificar
                    </v-btn>
                  </v-col>
                </v-row>
              </v-container>
            </v-form>
          </ValidationObserver>
        </base-material-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { ValidationObserver } from 'vee-validate'
import VTextFieldWithValidation from '@/components/inputs/VTextFieldWithValidation'
import { mapActions } from 'vuex'

export default {
  data() {
    return {

    }
  },
  components: {
    ValidationObserver,
    VTextFieldWithValidation,
  },
  computed: {
    email: {
      get() {
        return this.$store.state.users.user.email
      },
      set(value) {
        const data = {
          key: 'email',
          value,
        }
        this.addUserData(data)
      },
    },
  },
  methods: {
    ...mapActions('users', ['fetchUser', 'addUserData']),
  },
  props: ['id'],
  async mounted() {
    await this.fetchUser(this.id)
  },
}
</script>

还有我的 users.js 商店

import UserService from '@/services/UserService.js'
import * as types from '@/store/mutation-types'

const state = {
  users: [],
  user: {
    verified: false,
    email: '',
    empleado: {
      nombre: '',
      apellido: '',
      direccion: '',
      telefono: '',
    },
    tipo_usuario: '',
  },
}

const mutations = {
  SET_USER(state, user) {
    state.user = user
  },
  [types.FILL_USER](state, data) {
    state.user.verified = data.verified
    state.user.email = data.email
  },
  [types.ADD_USER_DATA](state, data) {
    switch (data.key) {
      case 'email':
        state.user.email = data.value
        break
      default:
        break
    }
  },
}

const actions = {
  fetchUser({ commit, getters, dispatch }, id) {
    var user = getters.getUserById(id)
    if (user) {
      commit('SET_USER', user)
    } else {
      UserService.getUser(id)
        .then((response) => {
          commit('SET_USER', response.data)
        })
        .catch((error) => {
          const notification = {
            type: 'error',
            message: 'There was a problem fetching user: ' + error.message,
          }
          dispatch('notification/add', notification, { root: true })
        })
    }
  },
  addUserData({ commit }, data) {
    commit(types.ADD_USER_DATA, data)
  },
}
const getters = {
  getUserById: (state) => (id) => {
    return state.users.find((user) => user.id === id)
  },
  users: (state) => {
    return state.users
  },
  user: (state) => state.user,
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations,
}

提前致谢。

Answer 1

您从模板中的“用户”对象访问电子邮件：

<v-col cols="12" md="4">
                    <VTextFieldWithValidation
                      label="Correo Electrónico"
                      color="secondary"
                      prepend-icon="mdi-at"
                      rules="required|email"
                      :value="user.email"
                    />

但您的用户未在组件中定义。您有一个计算好的“电子邮件”，您可能想用它来获取用户的电子邮件。因此，删除用户并使用您计算的电子邮件。