当前位置：首页 > VUE

vue实现增加商品

2026-01-17 22:58:13VUE

使用 Vue 实现商品添加功能

实现步骤

1. 创建商品表单组件 开发一个商品表单组件，包含商品名称、价格、描述等字段。使用 Vue 的 v-model 指令实现双向数据绑定。

<template>
  <div>
    <input v-model="product.name" placeholder="商品名称">
    <input v-model="product.price" placeholder="价格" type="number">
    <textarea v-model="product.description" placeholder="描述"></textarea>
    <button @click="addProduct">添加商品</button>
  </div>
</template>

2. 定义数据和方法 在 Vue 组件中定义商品数据对象和添加商品的方法。

<script>
export default {
  data() {
    return {
      product: {
        name: '',
        price: 0,
        description: ''
      }
    }
  },
  methods: {
    addProduct() {
      this.$emit('add-product', {...this.product})
      this.product = {
        name: '',
        price: 0,
        description: ''
      }
    }
  }
}
</script>

3. 处理商品列表 在父组件中接收新增商品并更新列表。

<template>
  <div>
    <product-form @add-product="handleAddProduct"></product-form>
    <ul>
      <li v-for="(item, index) in products" :key="index">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
import ProductForm from './ProductForm.vue'

export default {
  components: { ProductForm },
  data() {
    return {
      products: []
    }
  },
  methods: {
    handleAddProduct(product) {
      this.products.push(product)
    }
  }
}
</script>

4. 表单验证 添加简单的表单验证确保必填字段不为空。

methods: {
  addProduct() {
    if (!this.product.name || !this.product.price) {
      alert('请填写完整信息')
      return
    }
    this.$emit('add-product', {...this.product})
    // 重置表单
  }
}

5. 使用 Vuex 管理状态（可选） 对于大型应用，可以使用 Vuex 集中管理商品状态。

// store.js
export default new Vuex.Store({
  state: {
    products: []
  },
  mutations: {
    ADD_PRODUCT(state, product) {
      state.products.push(product)
    }
  }
})

// 组件中
methods: {
  handleAddProduct(product) {
    this.$store.commit('ADD_PRODUCT', product)
  }
}

注意事项