问题描述
在vue项目中提示错误,data functions should return an object
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
<template>
<el-dialog title="Login" :visible.sync="dialogFormVisible" :modal="true" :modal-append-to-body="false" class="my-dialog">
<el-form :model="form" label-width="100px" :rules="rules" ref="form">
<el-form-item label="Username" prop="username">
<el-input v-model="form.username" auto-complete="off" prefix-icon="iconfont icon-user"></el-input>
</el-form-item>
<el-form-item label="Password" prop="password">
<el-input type="password" @keyup.enter.native="loginMethod" v-model="form.password" auto-complete="off" prefix-icon="iconfont icon-password"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">Cancel</el-button>
<el-button type="primary" @click.native="loginMethod">Log in</el-button>
</div>
</el-dialog>
</template>
export default {
data() {
return {
dialogFormVisible: false,
form: {
username: "",
password: ""
},
rules: {
username: [
{
required: true,
message: "please input your username",
tigger: "blur"
}
],
password: [
{
required: true,
message: "please input your password",
tigger: "blur"
}
]
}
};
},
methods: {
loginMethod() {
this.$refs.form.validate(valid => {
if (valid) {
this.$store
.dispatch("LoginByUsername", this.form)
.then(() => {
Message.success("Login Success");
this.$router.push({ path: '/' });
})
.catch(err => {
Message.info(err);
});
} else {
console.log("error submit!!");
return false;
}
});
}
}
};```
### 你期待的结果是什么?实际看到的错误信息又是什么?
终于找到了,是在Message.info(err)错了,Message.info()是element-ui的组件,只能接受字符串,不能接受对象。
改为Message.info(err.message)就好了。