vue 实现删除按钮

实现删除按钮的基本方法

在 Vue 中实现删除按钮通常需要绑定点击事件，并在事件处理函数中执行删除逻辑。可以通过以下方式实现：

<template>
  <button @click="handleDelete">删除</button>
</template>

<script>
export default {
  methods: {
    handleDelete() {
      // 删除逻辑
      console.log('删除操作');
    }
  }
}
</script>

删除列表中的特定项

当需要从列表中删除特定项时，可以使用数组的 splice 方法或 filter 方法：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ item.name }}
      <button @click="deleteItem(index)">删除</button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' }
      ]
    }
  },
  methods: {
    deleteItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

通过 ID 删除项目

如果项目有唯一标识符，推荐使用 ID 进行删除操作：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
      <button @click="deleteItem(item.id)">删除</button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' }
      ]
    }
  },
  methods: {
    deleteItem(id) {
      this.items = this.items.filter(item => item.id !== id)
    }
  }
}
</script>

删除前确认操作

添加确认对话框可以防止误操作：

<template>
  <button @click="confirmDelete">删除</button>
</template>

<script>
export default {
  methods: {
    confirmDelete() {
      if (confirm('确定要删除吗？')) {
        this.handleDelete()
      }
    },
    handleDelete() {
      // 实际删除逻辑
    }
  }
}
</script>

与后端 API 交互的删除操作

当需要从服务器删除数据时，通常会发送 API 请求：

<template>
  <button @click="deleteFromServer(item.id)">删除</button>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    async deleteFromServer(id) {
      try {
        await axios.delete(`/api/items/${id}`)
        // 删除成功后更新本地数据
        this.items = this.items.filter(item => item.id !== id)
      } catch (error) {
        console.error('删除失败:', error)
      }
    }
  }
}
</script>

使用 Vuex 管理删除操作

在大型应用中，可以使用 Vuex 集中管理状态和删除逻辑：

<template>
  <button @click="deleteItem(item.id)">删除</button>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['deleteItem'])
  }
}
</script>

在 Vuex store 中：

actions: {
  async deleteItem({ commit }, id) {
    try {
      await api.deleteItem(id)
      commit('REMOVE_ITEM', id)
    } catch (error) {
      console.error(error)
    }
  }
},
mutations: {
  REMOVE_ITEM(state, id) {
    state.items = state.items.filter(item => item.id !== id)
  }
}

添加加载状态

为异步删除操作添加加载状态可以改善用户体验：

<template>
  <button @click="deleteItem" :disabled="isDeleting">
    {{ isDeleting ? '删除中...' : '删除' }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isDeleting: false
    }
  },
  methods: {
    async deleteItem() {
      this.isDeleting = true
      try {
        await performDelete()
      } finally {
        this.isDeleting = false
      }
    }
  }
}
</script>

使用插槽创建可复用删除按钮组件

创建可复用的删除按钮组件：

<!-- DeleteButton.vue -->
<template>
  <button
    @click="handleClick"
    :disabled="disabled || loading"
    :class="{ 'is-loading': loading }"
  >
    <slot>{{ label }}</slot>
  </button>
</template>

<script>
export default {
  props: {
    disabled: Boolean,
    label: {
      type: String,
      default: '删除'
    }
  },
  data() {
    return {
      loading: false
    }
  },
  methods: {
    async handleClick() {
      this.loading = true
      try {
        await this.$emit('confirm')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

使用方式：

<delete-button @confirm="deleteItem">删除项目</delete-button>