I am looking to add an input field that users can unlock if necessary.
My idea is to have a button visually connected to the input field, either placed inside or outside of it.
To achieve this, I have utilized the Vuetify Text Field's append-outer-icon prop :
The HTML template :
<v-text-field
v-model="message"
:append-outer-icon="icon"
@click:append-outer="locked = !locked"
:disabled="locked"
></v-text-field>
Here is the accompanying script :
data: () => ({
message: '',
locked: true,
}),
computed: {
icon () {
return this.locked ? 'lock' : 'lock_open'
}
},
You can view the Codepen example here: https://codepen.io/anon/pen/jQaJPK
However, the button is unclickable when the input is disabled.
Is there a way to enable the button while keeping the input disabled using an alternative method, or do I need to separate the button from the input field?