如何从users表取值并设置select2下拉框的role、supervisor预选项？

问题原因 #

• Supervisor下拉框数据源未加载：代码中userList初始值为空数组，没有调用/user/ajax/list接口加载用户列表数据，没有可选选项自然无法匹配预设值
• 变量命名冲突+选中条件错误：Supervisor的option循环中变量名用了user，和外层存储当前用户信息的user变量重名，无法正确获取当前用户的supervisor值；且写的:selected="user.id == user.name"逻辑完全错误，两个字段本身就不相等
• 冗余的selected属性和v-model冲突：使用Vue的v-model时不需要手动声明:selected属性，Vue会自动根据绑定值匹配选中项，手动写的属性反而会和select2组件的选中逻辑冲突
• Select2和Vue的同步问题：如果使用的是原生Select2而非Vue适配版本，需要确保数据加载完成后再初始化Select2，否则数据更新后Select2不会自动刷新选中状态
• 用户列表接口缺id字段：user_list接口返回的用户数据没有携带id字段，option的key属性绑定失效也会导致匹配异常

修复步骤 #

1. 修复Supervisor下拉框的循环代码，修改变量名，删除冗余的selected属性：

<select2 ref="supervisor" id="supervisor" name="supervisor" class="form-control" v-model.trim="$v.user.supervisor.$model">
    <option v-for="(staff, index) in userList" :key="staff.id" :value="staff.name">@{{ staff.name }}</option>
</select2>

2. 修复UserController.php的user_list方法，返回用户id字段：

public function user_list() {
    $users = User::get();
    return $users->map(function($item) {
        return [
            "id" => $item->id,
            "name" => $item->name,
            "role" => $item->role,
            "supervisor" => $item->supervisor,
        ];
    });
}

3. 在Vue的mounted钩子中加载用户列表数据，同时处理Select2的同步：

var app = new Vue({
    el: '#app',
    data() {
        return {
            user: @json($json_user),
            role_opt: [
                {role: 'management', name: 'Management'},
                {role: 'employee', name: 'Employee'}
            ],
            userList: [],
        }
    },
    async mounted() {
        // 加载用户列表
        const res = await fetch('{{ route("data.user.list") }}')
        this.userList = await res.json()
        // 原生Select2需要手动触发更新同步选中状态
        this.$nextTick(() => {
            $('#role').trigger('change')
            $('#supervisor').trigger('change')
        })
    }
});

4. 修复Role下拉的冗余selected属性，同时修正显示文本为角色名称：

<select2 ref="role" id="role" name="role" class="form-control" v-model.trim="$v.user.role.$model">
    <option v-for="(opt, index) in role_opt" :key="opt.role" :value="opt.role">@{{ opt.name }}</option>
</select2>

补充排查 #

如果修复后还是无法选中，先把v-model暂时改成直接绑定user.role和user.supervisor测试，如果测试正常则说明是VeeValidate的初始化配置问题，需要检查VeeValidate的初始值是否和user对象的值同步。

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