Menu
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?
493
The readonly attribute is a boolean attribute. When present, it specifies that an input field is read-only. A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
The v-model directive in Vue creates a two-way binding on the input element. All you need to do is simply declare a v-model directive for the input element and reference it to get the value. Every time the input value changes, “myInput” model will keep track of the changes.
Read-only is a file attribute which only allows a user to view a file, restricting any writing to the file. Setting a file to “read-only” will still allow that file to be opened and read; however, changes such as deletions, overwrites, edits or name changes cannot be made.
In vue. js, we use the v-model directive to create a two-way data binding between the input field and vue data property, so that we can clear an input field value by setting the empty string (" ") to the data property.
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.
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
