33

How to make an input field read only based on Vue data?

For example:

<select class="form-control" 
        id="selectCategory" 
        :disabled="cat_id >= 
            1" 
        name="cat_id">

I want to make the field read only but not disabled. How can I achieve this?

1

4 Answers 4

56

Please note that, according to HTML specs, the select tag in HTML doesn't have a readonly attribute.

However, in general case, I'd go with something like this:

<input class="form-control" id="selectCategory" :readonly="cat_id >= 1">

Basically, the documentation says that if an attribute value evaluates to false, then the attribute being omitted. See here for further details.

0
12

You can do something like this:

<input v-bind:readonly="isReadOnly">
2

I ran into this issue while making a form for a password changing form and I encountered the browser trying to autocomplete everything. This should prevent the autocomplete from firing and also provide a method to change the value to suit your needs.
For some reason adding a v-bind:readonly property of true reverts to readonly="readonly"
Here is my currently working example which removes and re-adds the readonly property on focusout.

Vue Template HTML

<input type="password" v-model="user.password" placeholder="Password" @focusin="toggleReadonly" @focusout="toggleReadonly" :readonly="true">

Method

toggleReadonly(event){
          event.preventDefault()
          if(event.target.getAttribute('readonly') == 'readonly'){
              event.target.removeAttribute('readonly')
          }
          else{
              event.target.setAttribute('readonly', 'readonly')
         }
 }
2
  • autocomplete="off" for preventing an input to autocomplete
    – Neha
    Jun 1, 2019 at 4:46
  • <input type="password" v-model="user.password" placeholder="Password" autocomplete="off">
    – Neha
    Jun 1, 2019 at 4:46
1

you could have a computed property that returns a boolean dependent on whatever criteria you need.

<input type="text" :disabled=isDisabled>

then put your logic in a computed property...

computed: {
 isDisabled() {
// evaluate whatever you need to determine disabled here...
   return true;
 }
}

JSFIDDLE https://jsfiddle.net/sureshamk/0dzvcf4d/1320/

1
  • Disabled is not the same as readonly. A disabled field in a form won't be submitted while a readonly will be. Further, CSS styles are not the same for readonly and disabled. Nov 14, 2018 at 7:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.