如何为循环生成的v-select设置匹配用户code的默认选项？

1. 重构绑定数据，避免多组件冲突 #

你当前用单个变量selectedRightType绑定所有v-select，会导致多个组件互相影响。需要改成数组结构，让每个v-select对应独立的绑定值：

data() {
  return {
    appRightZone: [
      {label:"Third", value: 50, editable: true},
      {label:"Contacts", value: 100, editable: true},
      {label:"Actions", value: 200, editable: true},
      {label:"Leads", value: 250, editable: true},
      {label:"Deals", value: 300, editable: true},
      {label:"Quotes", value: 400, editable: true}
    ],
    appRightType: [
      {label:"None", code: 0},
      {label:"User can create", code: 1000},
      {label:"User can only read", code: 5000},
      {label:"User can create and read", code: 5500},
      {label:"User can create, read and delete", code: 6000},
    ],
    userRights: {}, // 存储API返回的用户权限，格式如 {Third:5000, Contacts:1000,...}
    selectedRightTypes: [] // 每个v-select的绑定值数组
  }
}

2. 接口数据返回后，初始化选中值 #

拿到用户权限数据后，遍历appRightZone，根据每个项的label匹配用户的code值，再从appRightType中找到对应的对象，填充到绑定数组：

async fetchUserPermissions() {
  // 调用API获取用户权限数据
  const res = await yourApiRequest();
  this.userRights = res.data;

  // 批量初始化每个v-select的默认值
  this.selectedRightTypes = this.appRightZone.map(zoneItem => {
    // 获取用户当前权限的code
    const userCode = this.userRights[zoneItem.label];
    // 匹配appRightType中的对应对象，无匹配则默认选"None"
    return this.appRightType.find(type => type.code === userCode) || this.appRightType[0];
  });
}

3. 修改模板绑定逻辑 #

遍历appRightZone时带上索引，将v-select绑定到selectedRightTypes的对应索引项：

<v-container v-for="(select, index) in appRightZone" :key="index" fluid>
  <span class="font-weight-bold">{{select.label}}</span>
  <v-col cols="10">
    <v-select 
      return-object 
      v-model="selectedRightTypes[index]" 
      :items="appRightType" 
      item-text="label" 
      item-value="code" 
      outlined 
      dense 
      hide-details
    >
    </v-select>
  </v-col>
</v-container>

核心注意点 #

• return-object属性确保v-select绑定的是完整对象，和初始化逻辑匹配，而非仅code值
• 遍历必须加:key（优先用唯一标识，比如select.value，这里用索引是简化写法），避免Vue渲染警告
• 若用户数据中某个权限字段缺失，默认选中appRightType[0]（即"None"），可根据需求调整默认规则

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