Vue.js实现下拉菜单option筛选：隐藏指定id的角色选项

实现方案 #

你可以通过以下两种常用方案实现过滤需求： #

方案1：模板层直接过滤（适用仅当前下拉需要过滤的场景） #

直接在v-for遍历的时候对数组做过滤，无需修改数据请求逻辑，修改后的下拉代码如下：

<select v-validate="'required'" id="role" name="role" v-model="user.role">
   <option value="">Select Role</option>
   <option 
     :value="role.id" 
     v-for="(role, index) in roles.filter(r => r.id !== 1 && r.id !== 2)" 
     :role="role" 
     :index="index" 
     :key="role.id"
   >
     {{role.name}}
   </option>
</select>

方案2：请求数据后预处理（适用全组件所有用到roles的场景都需要过滤的情况） #

在axios拿到接口返回数据后先做过滤再赋值给this.roles，不需要修改模板代码，修改后的mounted逻辑如下：

mounted(){
    const header = {
           'Authorization': 'Bearer ' + this.sessionUserData,
     };
   axios.get('/api/backend/fetchrole', {headers: header}).then((response) => {
      // 先过滤掉id为1和2的角色再赋值
      this.roles = response.data.filter(r => r.id !== 1 && r.id !== 2);
   });
}

如果你的id判断逻辑后续可能会变，也可以单独写一个计算属性返回过滤后的角色列表，维护起来更方便：

computed: {
  filteredRoles() {
    return this.roles.filter(r => r.id !== 1 && r.id !== 2)
  }
}

之后模板里v-for直接遍历filteredRoles即可。

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