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?
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.
You can do something like this:
<input v-bind:readonly="isReadOnly">
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')
}
}
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;
}
}
