CODEWITHSUNDEEP
vue.jsvuejs2
user3653474
user3653474

Reputation: 3852

Filter dropdown option in vue.js

I have a dropdown on my vue component

<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" :role="role" :index="index" :key="role.id">
            {{role.name}} </option>
</select>

I do not want to show option where role.id==1 and role.id=2

fetching data on mounted like this

mounted(){
    const header = {
           'Authorization': 'Bearer ' + this.sessionUserData,
     };
   axios.get('/api/backend/fetchrole', {headers: header}).then((response) => {
      this.roles = response.data;
   });

Any help is highly appreciated

Upvotes: 1

Views: 1825

Answers (1)

grovskiy
grovskiy

Reputation: 788

Use a filter

<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 formattedRoles" :role="role" :index="index" :key="role.id">{{role.name}}</option>
</select>

computed: {
  formattedRoles() {
    return this.roles.filter(item => item.id !== 1 && item.id !== 2);
  },
}

or

mounted() {
  const header = {
    'Authorization': 'Bearer ' + this.sessionUserData,
  };
  axios.get('/api/backend/fetchrole', { headers: header }).then((response) => {
    this.roles = response.data.filter(item => item.id !== 1 && item.id !== 2);
  });
},

Upvotes: 2

Related Questions