problem description
prompt error, data functions should return an object in vue project
related codes
/ / Please paste the code text below (do not replace the code with pictures)
<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;
}
});
}
}
};```
-sharp-sharp-sharp