vue3多选改为单选数据从数组变为数值怎么让数据一直是数组

如果你想在Vue 3中保持`roleIds`数据始终为数组形式，即使用户选择单选项时，也需要采取一些策略来维护这个结构。一种常见的做法是在`v-model`绑定的对象中使用一个特定的键来表示多选状态，而实际的选择结果存放在数组的一个单独元素上。

例如，你可以这样设计：

<template>
  <div>
    <input type="radio" v-model="selectedRoleId" :value="roleId" v-for="(roleId, index) in roles" :key="index">
    {{ roleId }}
    <button @click="toggleSelection(index)">切换选择</button>
  </div>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';

// 定义原始角色数组
const roles = ref([1, 2, 3]);

// 当前选中的角色ID
const selectedRoleId = ref(null);

// 记录已选角色的索引数组
const selectedIndices = ref([]);

// 根据selectedRoleId计算显示的数据
const displayedRoles = computed(() => {
  return roles.value.map((roleId, index) => ({
    value: roleId,
    selected: selectedIndices.value.includes(index),
  }));
});

// 切换选择
function toggleSelection(index) {
  if (selectedRoleId.value === roles.value[index]) {
    selectedRoleId.value = null;
    selectedIndices.value = selectedIndices.value.filter(i => i !== index);
  } else {
    selectedRoleId.value = roles.value[index];
    selectedIndices.value.push(index);
  }
}
</script>

在这个例子中，`selectedRoleId`用于保存当前选中的单选选项，而`selectedIndices`则记录所有已选角色的索引，当切换单选时，会相应地更新这两个变量。`displayedRoles`则是一个计算属性，总是返回一个数组，即使只有一个角色被选中。