Vuetify中v-menu内嵌v-date-picker无法弹出问题求助

核心问题 #

你的v-menu标签存在语法错误：v-model="selectDate没有闭合双引号和标签起始的右尖括号，这直接导致组件解析失败，菜单无法触发弹出。

修复后的完整代码 #

<template>
  <v-menu v-model="selectDate">
    <template v-slot:activator="{ on }">    
      <v-text-field 
        v-on="on" 
        :value="eventDate" 
        label="Event Date" 
        readonly
      ></v-text-field>
    </template>
    <v-date-picker 
      @input="selectDate = false" 
      v-model="eventDate" 
      no-title
    ></v-date-picker>
  </v-menu>
</template>

<script>
export default {
  data() {
    return {
      selectDate: false,
      eventDate: null,
    }
  }
}
</script>

关键修复说明 #

• 补全v-menu的属性闭合：将v-model="selectDate修正为v-model="selectDate"并添加标签起始右尖括号，确保组件结构合法。
• 保留v-text-field的:value绑定和readonly属性：文本框仅用于展示选中日期，无需双向绑定输入，:value足够满足需求，readonly避免用户手动编辑。
• 日期选择器的@input事件逻辑不变：选中日期后自动关闭菜单，修正语法后该逻辑可正常生效。

内容的提问来源于stack exchange，提问作者Aun