CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
Thomas Ferro
Thomas Ferro

Reputation: 2442

Untie text field's icon click enabling from the input one

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,
}),
computed: {
  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 ?

Upvotes: 3

Views: 3832

Answers (2)

gvaillant
gvaillant

Reputation: 1

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

Upvotes: 0

Traxo
Traxo

Reputation: 19002

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

Upvotes: 5

Related Questions