Vue.js循环渲染选择器及实现状态变更请求的问题

需求与问题 #

原需求要实现和jQuery一致的功能：

• 遍历用户列表渲染状态选择器，根据用户自身的status属性设置选择器默认选中项
• 监听选择器的变更事件，获取选中的状态值和对应用户ID，发送更新请求

当前遇到的问题：

• 不知道在Vue的循环渲染中，如何为每个用户的选择器设置对应默认选中状态
• 不清楚选择器变更时，怎么同时拿到用户ID和选中的选项值

解决思路 #

1. 避免单一变量绑定所有选择器：不能用全局的selectedOption绑定所有用户的选择器，要为每个用户单独维护选中状态，可以直接在用户对象上扩展selectedStatus属性，或者用Map存储每个用户的选中状态
2. 默认选中逻辑：初始化时根据用户的status（比如user.status为active或wait_confirm），从items_status中匹配对应对象，赋值给用户的选中状态属性
3. 监听变更并获取数据：通过VSelect的@change事件（或直接监听v-model变化），在回调中拿到当前用户ID和选中的状态值，触发更新请求

完整代码示例 #

Script 部分 #

import { ref, onMounted } from 'vue'

const items_status = ref([
  {
    state: 'Active',
    abbr: 'active',
  },
  {
    state: 'Wait Confirm',
    abbr: 'wait_confirm',
  }
])

// 假设users是从接口获取的用户列表
const users = ref([
  { id: 1, name: '用户A', status: 'active' },
  { id: 2, name: '用户B', status: 'wait_confirm' }
])

onMounted(() => {
  // 初始化每个用户的选中状态
  users.value.forEach(user => {
    user.selectedStatus = items_status.value.find(item => item.abbr === user.status) || items_status.value[1]
  })
})

// 发送更新请求的函数
const updateUserStatus = (userId, selectedStatus) => {
  // 替换成实际接口请求逻辑
  console.log(`更新用户${userId}的状态为：${selectedStatus.abbr}`)
  // 示例：axios.post('/api/update-status', { userId, status: selectedStatus.abbr })
}

Template 部分 #

<tr
  v-for="user in users"
  :key="user.id"
  style="height: 3.75rem;"
>
  <td>{{ user.name }}</td>
  <td>
    <VSelect
      v-model="user.selectedStatus"
      :hint="`${user.selectedStatus.state}, ${user.selectedStatus.abbr}`"
      :items="items_status"
      item-title="state"
      item-value="abbr"
      label="选择状态"
      persistent-hint
      return-object
      single-line
      @change="updateUserStatus(user.id, user.selectedStatus)"
    />
  </td>
</tr>

说明 #

• 初始化时通过onMounted遍历用户列表，根据用户status匹配items_status中的选项，赋值给user.selectedStatus实现默认选中
• 每个选择器的v-model绑定到当前用户的selectedStatus，确保每个选择器状态独立
• 通过@change事件触发updateUserStatus函数，直接传入用户ID和选中状态对象，即可发送更新请求

内容的提问来源于stack exchange，提问作者kennofizet