[Vuejs]-Can't disable v-edit-dialog in Vue.js application

by

0👍

Try:

v-if="editMode"

Then it will ‘go away’ if edit mode it false.

or

Bind it to editMode. The value of v-model controls the visibility.

v-model='editMode'

Using v-model will also set editMode to false if the user closes the dialog.

0👍

The v-edit-dialog component doesn’t have a ‘disabled’ prop so there is no way to stop it popping up if clicked. The only real option is to make the v-text-field disabled, as you already have, but this won’t stop the dialog opening.

Apparently the vuetify team aren’t fans of it.

There’s a possibility that edit dialog will be removed in 2.0, so it’s
not going to get much love

0👍

maybe i’m late for the party.

I wrapped v-edit-dialog with a div, with v-show .

<div v-show="editarRules">
  <v-edit-dialog >
...
  </v-edit-dialog>
</div>

and I have another div with the value I want t show, and the opposite condition in v-show.

Best Regards

0👍

How about some CSS?

Have a container with some class: "some-class".

Toggle the class like so: :class="'some-class': !editMode"

And then in CSS disable activating the edit dialog with: .some-class .v-small-dialog__activator { pointer-events: none; }

Leave a comment