35

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?

Ivar
  • 6,138
  • 12
  • 49
  • 61
Neha
  • 2,136
  • 5
  • 21
  • 50

4 Answers4

58

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.

tony19
  • 125,647
  • 18
  • 229
  • 307
P3trur0
  • 3,155
  • 1
  • 13
  • 27
12

You can do something like this: 

<input v-bind:readonly="isReadOnly">
John Rajan
  • 1,627
  • 2
  • 10
  • 19
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')
         }
 }
MyEmpireOfDuctTape
  • 21
  • 2
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/

Suresh Velusamy
  • 2,338
  • 19
  • 24
  • 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. – José Manuel Blasco Nov 14 '18 at 07:57