当前位置：首页 > VUE

vue实现增删改查

2026-02-21 00:48:45VUE

Vue 实现增删改查

在 Vue 中实现增删改查（CRUD）功能是常见的需求，通常涉及前端与后端 API 的交互。以下是一个基于 Vue 3 和 Composition API 的实现示例，假设后端 API 已提供相应的接口。

初始化项目与依赖

确保项目已安装 Vue 3 和 axios（用于 HTTP 请求）。若未安装，可以通过以下命令安装：

npm install axios

数据列表展示

定义一个响应式数据列表，并通过 axios 从后端获取数据：

<template>
  <div>
    <table>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.description }}</td>
        <td>
          <button @click="editItem(item)">编辑</button>
          <button @click="deleteItem(item.id)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const items = ref([]);

const fetchItems = async () => {
  const response = await axios.get('/api/items');
  items.value = response.data;
};

onMounted(() => {
  fetchItems();
});
</script>

新增数据

通过表单提交新增数据，并调用后端 API：

<template>
  <form @submit.prevent="addItem">
    <input v-model="newItem.name" placeholder="名称" />
    <input v-model="newItem.description" placeholder="描述" />
    <button type="submit">添加</button>
  </form>
</template>

<script setup>
const newItem = ref({
  name: '',
  description: ''
});

const addItem = async () => {
  await axios.post('/api/items', newItem.value);
  newItem.value = { name: '', description: '' };
  fetchItems(); // 重新加载列表
};
</script>

编辑数据

通过表单编辑现有数据，并调用后端 API 更新：

<template>
  <form v-if="editingItem" @submit.prevent="updateItem">
    <input v-model="editingItem.name" placeholder="名称" />
    <input v-model="editingItem.description" placeholder="描述" />
    <button type="submit">保存</button>
    <button @click="cancelEdit">取消</button>
  </form>
</template>

<script setup>
const editingItem = ref(null);

const editItem = (item) => {
  editingItem.value = { ...item };
};

const updateItem = async () => {
  await axios.put(`/api/items/${editingItem.value.id}`, editingItem.value);
  editingItem.value = null;
  fetchItems();
};

const cancelEdit = () => {
  editingItem.value = null;
};
</script>

删除数据

通过调用后端 API 删除数据：

<script setup>
const deleteItem = async (id) => {
  await axios.delete(`/api/items/${id}`);
  fetchItems();
};
</script>

完整示例

将以上部分整合为一个完整的 Vue 组件：

<template>
  <div>
    <form @submit.prevent="addItem">
      <input v-model="newItem.name" placeholder="名称" />
      <input v-model="newItem.description" placeholder="描述" />
      <button type="submit">添加</button>
    </form>

    <form v-if="editingItem" @submit.prevent="updateItem">
      <input v-model="editingItem.name" placeholder="名称" />
      <input v-model="editingItem.description" placeholder="描述" />
      <button type="submit">保存</button>
      <button @click="cancelEdit">取消</button>
    </form>

    <table>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.description }}</td>
        <td>
          <button @click="editItem(item)">编辑</button>
          <button @click="deleteItem(item.id)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const items = ref([]);
const newItem = ref({ name: '', description: '' });
const editingItem = ref(null);

const fetchItems = async () => {
  const response = await axios.get('/api/items');
  items.value = response.data;
};

const addItem = async () => {
  await axios.post('/api/items', newItem.value);
  newItem.value = { name: '', description: '' };
  fetchItems();
};

const editItem = (item) => {
  editingItem.value = { ...item };
};

const updateItem = async () => {
  await axios.put(`/api/items/${editingItem.value.id}`, editingItem.value);
  editingItem.value = null;
  fetchItems();
};

const cancelEdit = () => {
  editingItem.value = null;
};

const deleteItem = async (id) => {
  await axios.delete(`/api/items/${id}`);
  fetchItems();
};

onMounted(() => {
  fetchItems();
});
</script>