![](/img/trans.png)
[英][Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'filter' of undefined
[英][Vue warn]: Error in v-on handler: “TypeError: Cannot set property 'email' of undefined”
我在使用 Vuex 时遇到了一些问题。 事情就是这样。 我正在尝试执行 CRUD 的“更新”部分,我能够显示信息,但在控制台上,它告诉我这两个错误:
[Vue 警告]:v-on 处理程序中的错误:“TypeError:无法设置未定义的属性'email'”TypeError:无法设置未定义的属性'email'
(我只显示 email 字段以缩短代码,但字段的 rest 也会发生相同的错误)。
这是以下代码:
更新.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,
}
提前致谢。
您可以从模板中的“用户”object 访问 email:
<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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.