I would like to implement an input field that can be unlocked by the user if needed.

Visually, I was thinking that the button should be either outside or inside the field but strongly linked to it.

To do so, I have been using the Vuetify Text Field's append-outer-icon props :

The template :

<v-text-field
  v-model="message"
  :append-outer-icon="icon"
  @click:append-outer="locked = !locked"
  :disabled="locked"
></v-text-field>

And here is the script :

data: () => ({
  message: '',
  locked: true,
}),
puted: {
  icon () {
    return this.locked ? 'lock' : 'lock_open'
  }
},

Here's the link to the Codepen :

However, the button cannot be clicked when the input is disabled.

Is there any way to have the button enabled while the input is not using this method or am I forced to separate the button and the input ?

I would like to implement an input field that can be unlocked by the user if needed.

Visually, I was thinking that the button should be either outside or inside the field but strongly linked to it.

To do so, I have been using the Vuetify Text Field's append-outer-icon props :

The template :

<v-text-field
  v-model="message"
  :append-outer-icon="icon"
  @click:append-outer="locked = !locked"
  :disabled="locked"
></v-text-field>

And here is the script :

data: () => ({
  message: '',
  locked: true,
}),
puted: {
  icon () {
    return this.locked ? 'lock' : 'lock_open'
  }
},

Here's the link to the Codepen : https://codepen.io/anon/pen/jQaJPK

However, the button cannot be clicked when the input is disabled.

Is there any way to have the button enabled while the input is not using this method or am I forced to separate the button and the input ?

• javascript
• vue.js
• vuejs2
• vuetify.js

Share Improve this question Follow asked Nov 20, 2018 at 11:11 Thomas FerroThomas Ferro 2,4522020 silver badges3434 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can override the CSS which prevents icon's click events:

.v-input--is-disabled:not(.v-input--is-readonly) .v-icon.v-icon--disabled {
  pointer-events: auto;
} 

---

Or for additional customization you can put icon inside the append-outer slot (there is also append slot for "inner" HTML), add custom icon class and override CSS which prevents clicking.

<v-text-field
  v-model="message"
  :disabled="locked"
>
  <v-icon 
      slot="append-outer" 
      @click="locked = !locked"
      class="lock-button"
  >
    {{ icon }}
  </v-icon>
</v-text-field>

So then also you can add color="black" on v-icon for example so it doesn't look disabled.

CSS:

.lock-button {
  pointer-events: auto;
}

Codepen

i might be a little late, but i juste faced this problem, and what you were looking for is the prop readonly

 <v-text-field
    v-model="pseudo"
    :readonly="!locked"
    :append-icon="locked ? icon : icon2"
    @click:append="appendIconClick"
 />

To anyone reading this, something like that will make the text input disabled until the icon is clicked