<template>
<div class="categories">
<h1>{{id?'编辑':"新建"}}分类</h1>
<el-form :model="form" :rules="addCateFormRules" ref="addCateForm">
<el-form-item label="上级分类">
<el-select v-model="form.parents">
<el-option
v-for="(item,index) in parents"
:key="index"
:label="item.name"
:value="item._id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="save">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props: {
id: { type: String }
},
data() {
return {
form: {},
parents: [],
addCateFormRules: {
name: [
{ required: true, message: "请输入分类名称", trigger: "blur" },
{
min: 2,
max: 10,
message: "用户名的长度在2~10个字",
trigger: "blur"
}
]
}
};
},
methods: {
async save() {
this.$refs.addCateForm.validate(async valid => {
if (!valid) return;
let res;
if (this.id) {
res = await this.$http.put(`categories/${this.id}`, this.form);
} else {
res = await this.$http.post("categories", this.form);
}
if (res.status === 200) {
this.form = {};
this.$router.push("/categories");
this.$message({
type: "success",
message: "保存成功"
});
}
});
},
async fetch() {
const res = await this.$http.get(`categories/${this.id}`);
this.form = res.data;
console.log(res);
},
async fetchParents() {
const res = await this.$http.get(`categories`);
this.parents = res.data;
}
},
created() {
this.fetchParents();
this.id && this.fetch();
}
};
</script>
踩坑:需要在el-form-item中加入属性 prop=“name”,不然验证不会生效
<el-form-item label="名称" prop="name">