我在Vuex上遇到了一些问题。事情是这样的。我试图做一个CRUD的 "更新 "部分,我能够显示信息,但在控制台,它告诉我这两个错误。
[Vue warn]: 错误在v-on处理程序中: "TypeError: TypeError: Cannot set property 'email' of undefined" TypeError: TypeError: Cannot set property 'email' of undefined(无法设置未定义的属性'电子邮件')
我只显示了电子邮件字段,以缩短代码,但其余字段也会发生同样的错误)。
这是下面的代码。
Update.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>
而我的user.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,
}
先谢谢你。
你从模板中的 "用户 "对象访问电子邮件。
<v-col cols="12" md="4">
<VTextFieldWithValidation
label="Correo Electrónico"
color="secondary"
prepend-icon="mdi-at"
rules="required|email"
:value="user.email"
/>
但你的用户并没有在组件中定义。你有一个计算过的 "email",你可能想用它来获取用户的email。所以,删除用户并使用你计算出来的电子邮件。