disable/enable select depending on value vuejs

Question

i have 2 select fields:

first field:

ns-dropdown-item(item-id="6")    
  ns-select(:placeholder="$t('users.role')", v-model="newLeader.role",
    :options="roleOptions", @change="activeIfCoororMan")

second field is disable

ns-dropdown-item(item-id="7")    
  ns-select(:placeholder="$t('users.client')", v-model="client", 
    :options="clients", :disabled="true")

this is my vue data:

export default {
  template: template(),
  data() {
    return {
      newLeader: null,
      client: null,
      clients: [],
      errors: {},
      roleOptions: [
        {value: 'coordinator', label: this.$t('users.roleOptions.coordinator')},
        {value: 'manager', label: this.$t('users.roleOptions.manager')},
        {value: 'leader', label: this.$t('users.roleOptions.leader')},
        {value: 'leader_admin', label: this.$t('users.roleOptions.leader_admin')}
      ]
    };
  },
  methods:  {
    activeIfCoororMan() {
      if(this.newLeader.role === 'manager' || this.newLeader.role === 'coordinator') {
        console.log("remove-disabled")
      } else {
        console.log("stay-disabled")
      }
    },
  }
}

when i'm choosing in first select coordinator or manager, i can see in console: remove-disable. But, i would like change :disable attribute from second field to false.

Thank you

Bhojendra Rauniyar · Accepted Answer · 2018-04-09 19:28:32Z

2

You can use conditional rendering:

ns-dropdown-item(item-id="7")    
  ns-select(:placeholder="$t('users.client')", v-model="client", 
    :options="clients", 
    :disabled="newLeader.role !== 'manager' || newLeader.role !== 'coordinator'")

This will add disabled property only when role is not manager nor coordinator.

But this would be a security issue. Why you're just disabling them? You should not have element rendered at all. Thus, I suggest you to use v-if statement so that it will be only rendered when the condition is matched else the element is not present in the DOM.

ns-dropdown-item(item-id="7")    
  ns-select(:placeholder="$t('users.client')", v-model="client", 
    :options="clients", 
    v-if="newLeader.role === 'manager' || newLeader.role === 'coordinator'")

edited Apr 9, 2018 at 19:28

answered Apr 9, 2018 at 19:23

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

tomatito Over a year ago

It does not work. Error:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "disabled"

Also, i need this code in one function to call my api service. Thank you!

Bhojendra Rauniyar Over a year ago

From the error, I noticed that you need to initialize the data as newLeader: {}, instead of newLeader: null,

tomatito Over a year ago

Thank you, but i'm getting the same error. i need this code out of template, to call my api. Thank you again :)

Bhojendra Rauniyar Over a year ago

It seems to be initialization problem. Try defining like newLeader: { role: ''}.

Collectives™ on Stack Overflow

disable/enable select depending on value vuejs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related