Question

我在下面有这个v-edit-dialog，即使editMode为false，也会弹出对话框！

我也尝试过将属性设置为“禁用”，例如

：disabled =“！editMode” =>禁用

它仍然弹出！

<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组件没有“ disabled”道具，因此如果单击它，则无法阻止它弹出。唯一可行的选择是禁用v文本字段，就像您已经拥有的那样，但这不会停止对话框的打开。

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

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

Answer 3

也许我迟到了。

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

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

还有另一个div，它的值是我不想显示的，而在v-show中是相反的情况。

最好的问候

Answer 4

一些CSS怎么样？

有一个带有某些类的容器：“ some-class”。

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

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

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

4 个答案: