在 Vuetify 中，当在其中的 AppDateTimePicker 中选择日期时，VMenu 会关闭

Question

我正在使用 Vue 主题 Vuexy（Vue 和 Vuetify），我遇到了 VMenu 的问题，因为它有一个 AppDateTimePicker（Vuetify 的 DatePicker），当选择日期时，它会被菜单关闭，如何防止菜单关闭？？？

这是我的代码

<VMenu width="300" height="450" :scrim="true" >
  <template #activator="{ props }" v-slot:activator="{ on: { click } }">
    <VIcon class="cursor-pointer" icon="tabler-settings-plus" v-bind="props" @click="updateEditIndex(indexUpper)"></VIcon>
  </template>
  <VList>
    <VListItem v-for="(item, indexLower) in menuItems" :key="indexLower" :active="false">
      <div class="d-flex flex-column ml-2" v-if="item.type === 'checkbox'">
        <VCheckbox v-model="field[item.value]" :label="item.title" />
        <p class="text-body-2">{{ item.description }}</p>
      </div>
      <div class="d-flex flex-column ml-2" v-if="item.type === 'textfield'">
       /// Some Input Fields
      </div>
                          
      <div class="d-flex flex-column ml-2" v-if="item.type === 'date'">
        <AppDateTimePicker :label="item.title" placeholder="Pick up the date" v-model="field[item.value]"  />
      </div>
    </VListItem>
  </VList>
</VMenu>

我在日期选择器上尝试过

@click.stop

，在菜单上尝试过

:close-on-content-click="false"

，但没有任何效果。

任何帮助将不胜感激 预先感谢

Answer 1

我找到了一种方法来完成这项工作。 您可以使用接收

persistent

的道具

boolean

。 当您选择日期时，这将阻止对话框关闭，但当您单击其外部时，它也会阻止对话框关闭。如果你这样做，你会注意到选择日期后有一个快速动画，如果你不想，你可以使用道具

no-click-animation

，它也会收到

boolean

。示例：

    <VDialog
      :width="580"
      :model-value="ClickFunction(foo)"
      no-click-animation
      persistent
    ></VDialog

Answer 2

移除此道具

@update:model-value="dialogModelValueUpdate"

来自您的

<VDialog />

组件。

我不知道确切的原因，但可能是因为模型值，与

内部的模型值名称冲突