当前位置：首页 > VUE

vue 实现批量关注

2026-03-28 15:49:51VUE

Vue 实现批量关注功能

批量关注功能通常需要前端与后端的配合完成。以下是一个基于 Vue 的实现方案：

数据准备与展示

创建包含用户列表的数据结构，每个用户对象包含关注状态

data() {
  return {
    users: [
      { id: 1, name: '用户A', isFollowing: false },
      { id: 2, name: '用户B', isFollowing: true },
      // 更多用户...
    ],
    selectedUsers: []
  }
}

模板渲染

使用 v-for 渲染用户列表，添加复选框和关注状态

<div v-for="user in users" :key="user.id">
  <input 
    type="checkbox" 
    v-model="selectedUsers" 
    :value="user.id"
  >
  <span>{{ user.name }}</span>
  <button @click="toggleFollow(user)">
    {{ user.isFollowing ? '取消关注' : '关注' }}
  </button>
</div>
<button @click="batchFollow">批量关注选中用户</button>

单个关注/取消关注

实现单个用户关注状态切换

methods: {
  toggleFollow(user) {
    user.isFollowing = !user.isFollowing
    // 调用API更新后端状态
    axios.post(`/api/follow/${user.id}`, {
      follow: user.isFollowing
    })
  }
}

批量关注实现

处理选中用户的批量关注操作

batchFollow() {
  const selectedIds = this.selectedUsers
  if (selectedIds.length === 0) {
    alert('请至少选择一个用户')
    return
  }

  // 批量更新前端状态
  this.users.forEach(user => {
    if (selectedIds.includes(user.id)) {
      user.isFollowing = true
    }
  })

  // 调用批量关注API
  axios.post('/api/follow/batch', {
    user_ids: selectedIds
  }).then(() => {
    this.selectedUsers = []
  })
}

优化建议

添加加载状态提升用户体验

data() {
  return {
    loading: false
  }
}

// 在方法中添加加载状态
batchFollow() {
  this.loading = true
  axios.post('/api/follow/batch', {
    user_ids: this.selectedUsers
  }).finally(() => {
    this.loading = false
  })
}