无法在 Vue 应用程序中禁用 v-edit-dialog .js

Question

我在下面有此v-edit-dialog，即使编辑模式为false，对话框弹出！

我还尝试过将属性设置为禁用

:disabled="!editMode" => disabled

它仍然弹出！

<v-edit-dialog :return-value.sync="props.item.productAnnotationText" large lazy persistent :disabled="!editMode" @save="inputAnnotation(props.item.productAnnotationText, props.item.id)">
  <div>{{ props.item.productAnnotationText }}</div>
  <div slot="input" class="mt-2 title">Update Annotation</div>
  <v-text-field slot="input" v-model="props.item.productAnnotationText" label="Edit" single-line counter maxlength="50" autofocus :disabled="!editMode" color="#1976d2"></v-text-field>
</v-edit-dialog>

Answer 1

尝试：

v-if="editMode"

然后，如果编辑模式为false。

将"走开"。

或

将其绑定到EditMode。V模型的value控制可见性。

v-model='editMode'

如果用户关闭对话框，则使用V模型也将将EditMode设置为False。

Answer 2

v-edit-dialog组件没有'禁用'prop，因此如果单击单击，就无法阻止它弹出。唯一真正的选择是像您已经拥有的那样使V-Text-Field禁用，但这不会阻止对话框打开。

显然，Vuetify团队不是它的粉丝。

有可能在2.0中删除编辑对话框，因此 不会得到太多的爱

Answer 3

也许我参加了聚会。

我用v-show包裹了v-edit-dialog。

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

，我还有另一个Div，我想要的值thave the的值，而V-show中的相反条件。

最好的问候

Answer 4

一些CSS？

怎么样

有一个具有一些类的容器：＆quot; some-class＆quot。

像这样切换课程： :class="'some-class': !editMode"

然后在CSS中禁用以下方式激活编辑对话框：.some-class .v-small-dialog__activator { pointer-events: none; }