vue实现商品添加功能
Vue 实现商品添加功能
数据绑定与表单结构
使用 v-model 双向绑定表单数据，确保输入框、下拉框等元素与 Vue 实例中的 formData 对象关联。例如：
<template>
<form @submit.prevent="handleSubmit">
<input v-model="formData.name" placeholder="商品名称">
<input v-model="formData.price" type="number" placeholder="价格">
<select v-model="formData.category">
<option value="electronics">电子产品</option>
</select>
<button type="submit">添加商品</button>
</form>
</template>方法定义与提交逻辑
在 Vue 的 methods 中定义 handleSubmit 方法，处理表单提交。验证数据后，可通过 API 调用或直接操作本地数据列表完成添加：
methods: {
handleSubmit() {
if (!this.formData.name || !this.formData.price) {
alert('请填写完整信息');
return;
}
this.$emit('add-product', { ...this.formData });
this.formData = { name: '', price: 0, category: '' }; // 重置表单
}
}状态管理与事件传递
若使用 Vuex，可通过 commit 触发 mutations 更新全局状态。否则通过 $emit 将新增商品数据传递给父组件：
// Vuex 示例
mutations: {
addProduct(state, product) {
state.products.push(product);
}
}
// 组件中调用
this.$store.commit('addProduct', this.formData);表单验证增强
引入 Vuelidate 或手动验证规则，确保输入合法性。例如验证价格是否为非负数：
validations: {
formData: {
price: { minValue: minValue(0) }
}
}文件上传处理
若需上传商品图片，使用 <input type="file"> 结合 FormData：
const formData = new FormData();
formData.append('image', this.selectedFile);
axios.post('/upload', formData).then(response => {
this.formData.imageUrl = response.data.url;
});实时反馈与UI优化
添加加载状态和成功/错误提示。例如使用 Element UI 的 el-message：
this.loading = true;
apiAddProduct(this.formData)
.then(() => {
this.$message.success('添加成功');
})
.finally(() => this.loading = false);
