当前位置：首页 > VUE

vue实现新增

2026-01-12 10:36:18VUE

Vue 实现新增功能的方法

在 Vue 中实现新增功能通常涉及表单输入、数据绑定和事件处理。以下是几种常见的实现方式：

表单绑定与提交

通过 v-model 绑定表单输入，使用 @submit 或 @click 触发新增逻辑：

<template>
  <form @submit.prevent="addItem">
    <input v-model="newItem.name" placeholder="名称">
    <input v-model="newItem.price" placeholder="价格" type="number">
    <button type="submit">新增</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      newItem: { name: '', price: 0 },
      items: []
    }
  },
  methods: {
    addItem() {
      this.items.push({...this.newItem});
      this.newItem = { name: '', price: 0 }; // 清空表单
    }
  }
}
</script>

使用 Vuex 管理状态

当项目需要全局状态管理时，可通过 Vuex 的 mutation 或 action 实现新增：

// store.js
const store = new Vuex.Store({
  state: {
    items: []
  },
  mutations: {
    ADD_ITEM(state, item) {
      state.items.push(item);
    }
  },
  actions: {
    addItem({ commit }, item) {
      commit('ADD_ITEM', item);
    }
  }
});

// 组件中调用
this.$store.dispatch('addItem', this.newItem);

动态表单验证

结合验证库（如 VeeValidate）实现带验证的新增功能：

<template>
  <ValidationObserver v-slot="{ handleSubmit }">
    <form @submit.prevent="handleSubmit(addItem)">
      <ValidationProvider name="名称" rules="required" v-slot="{ errors }">
        <input v-model="newItem.name">
        <span>{{ errors[0] }}</span>
      </ValidationProvider>
      <button type="submit">提交</button>
    </form>
  </ValidationObserver>
</template>

与后端 API 交互

通过 axios 将新增数据发送到后端：

methods: {
  async addItem() {
    try {
      const response = await axios.post('/api/items', this.newItem);
      this.items.push(response.data);
      this.newItem = { name: '', price: 0 };
    } catch (error) {
      console.error('新增失败:', error);
    }
  }
}

vue实现新增