vue实现增加商品
使用 Vue 实现增加商品功能
数据绑定与表单设计
在 Vue 中通过 v-model 实现表单数据的双向绑定，创建一个包含商品名称、价格、库存等字段的表单。示例模板如下：
<template>
<div>
<form @submit.prevent="addProduct">
<input v-model="newProduct.name" placeholder="商品名称" required>
<input v-model="newProduct.price" type="number" placeholder="价格" required>
<input v-model="newProduct.stock" type="number" placeholder="库存" required>
<button type="submit">添加商品</button>
</form>
</div>
</template>定义数据与方法
在 Vue 组件的 data 中初始化商品数据对象，并在 methods 中实现添加逻辑。新增的商品会被添加到商品列表中。
<script>
export default {
data() {
return {
newProduct: {
name: '',
price: 0,
stock: 0
},
products: []
}
},
methods: {
addProduct() {
this.products.push({...this.newProduct});
this.newProduct = { name: '', price: 0, stock: 0 }; // 重置表单
}
}
}
</script>展示商品列表
在模板中通过 v-for 循环展示已添加的商品列表，确保数据实时更新。
<template>
<div>
<ul>
<li v-for="(product, index) in products" :key="index">
{{ product.name }} - 价格: {{ product.price }} - 库存: {{ product.stock }}
</li>
</ul>
</div>
</template>表单验证
通过计算属性或第三方库（如 VeeValidate）对输入进行验证，确保数据的有效性。例如验证价格是否为非负数：
computed: {
isFormValid() {
return this.newProduct.name.trim() !== '' &&
this.newProduct.price >= 0 &&
this.newProduct.stock >= 0;
}
}提交逻辑优化
在 addProduct 方法中加入验证判断，避免无效数据提交。
methods: {
addProduct() {
if (!this.isFormValid) return alert('请填写有效数据');
this.products.push({...this.newProduct});
this.resetForm();
},
resetForm() {
this.newProduct = { name: '', price: 0, stock: 0 };
}
}使用 Vuex 管理状态（可选）
对于大型应用，可通过 Vuex 集中管理商品数据，确保跨组件状态同步。
// store.js
export default new Vuex.Store({
state: {
products: []
},
mutations: {
ADD_PRODUCT(state, product) {
state.products.push(product);
}
}
});组件中通过 commit 调用 mutation：
methods: {
addProduct() {
this.$store.commit('ADD_PRODUCT', {...this.newProduct});
this.resetForm();
}
}通过以上步骤，可以实现 Vue 中商品的添加功能，涵盖从表单绑定到状态管理的完整流程。根据项目复杂度，可选择基础数据绑定或引入 Vuex 进行扩展。
