Disable second input when first is filled in Vue

Question

I have a form, with two input fields.

How do I disable the alternate field when one is filled? For example, both fields start as being enabled. But, when I enter something in field 1, field 2 should be disabled, and vice versa -- so the user can only use one of the fields, not both at the same time.

In jQuery, I used the keyup event, and checked the length (> 0) of the field that generated the event, and disabled the other field. Similarly, for the other field. In Vue, I don't know how to reference another field, to disable it with :disable="true".

John Ellmore · Accepted Answer · 2018-04-12 05:52:34Z

4

Something like this should work:

<input type="text" v-model="firstField" :disabled="!!secondField" />
<input type="text" v-model="secondField" :disabled="!!firstField" />

This assumes that you have a data attribute for both firstField and secondField.

edited Apr 12, 2018 at 5:52

answered Apr 12, 2018 at 5:32

John Ellmore

2,2291 gold badge12 silver badges22 bronze badges

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

5 Comments

farhany Over a year ago

This disables both fields. On load, both fields should be enabled. How does one "init" this?

John Ellmore Over a year ago

I made an edit; coercing the :disabled attribute to a boolean seems to have done the trick. I just tested it and it seems to work correctly.

farhany Over a year ago

Not sure I totally understand how this works. Let me think over it. Is it really: just double flipping the secondField, and then double flipping the firstField, which works because... umm...

John Ellmore Over a year ago

Glad to help. If the second field has a "truthy" value (i.e. if it's not empty), the disabled attribute will be activated on the first element. If the second field is empty, it'll have a "falsy" value, and thus the first element's `disabled attribute will be deactivated. And vice versa for the second element.

farhany Over a year ago

Thanks a lot John, you're awesome!

Roland · Accepted Answer · 2018-04-12 06:13:20Z

2

Take a look

<div id="app">
   <input type="text" v-model="text1" :disabled="shouldDisable1" @keyup="disable('second')">
  <input type="text" v-model="text2" :disabled="shouldDisable2" @keyup="disable('first')">
</div>

new Vue({
  el: "#app",
  data: {
    text1: '',
    text2: '',
    shouldDisable1: false,
    shouldDisable2: false
  },
    methods: {
    disable(input) {
        if(input == 'first') {
        this.shouldDisable1 = true
        if (this.text2 == '') this.shouldDisable1 = false
      }else {
        this.shouldDisable2 = true
        if (this.text1 == '') this.shouldDisable2 = false
      }
    }
  }
})

See it in action in jsfiddle

edited Apr 12, 2018 at 6:13

answered Apr 12, 2018 at 6:06

Roland

28.1k9 gold badges108 silver badges103 bronze badges

2 Comments

farhany Over a year ago

Thanks roli for an alternative way to do this, which is exposes functionality that it is easier to fathom for a newbie like me to Vue. Much appreciated! I've marked John's answer as accepted, since he responded first. Hope that's cool.

Roland Over a year ago

Thank you.The John's answer is better and shorter.But i want to show you an alternative way.For best practice follow John's answer.

Collectives™ on Stack Overflow

Disable second input when first is filled in Vue

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related