VueJS+VuetifyJS调用$refs.dialog.save报错：该对象不是函数

嘿，我碰到过好几个开发者遇到这个问题，其实根源很简单——你调用的save()方法根本不是Vuetify的v-dialog组件自带的！你说用了示例的原始代码，大概率是漏了示例里自定义的save方法，或者误解了组件的用法。下面给你几个针对性的解决办法：

• 补上自定义的save方法：很多Vuetify的时间选择器示例里，会在组件的methods中手动定义save方法，用来处理时间保存和弹窗关闭逻辑。比如示例里可能有这段代码你没抄全：

methods: {
  save() {
    // 这里可以写你需要的保存逻辑，比如把时间提交到后端
    this.modal2 = false; // 关闭弹窗
  }
}

把这段补上，再绑定到确定按钮的@click事件上，就能正常调用了。

• 改用组件自带的同步逻辑：其实你已经用到了:return-value.sync="time"，这个属性会在弹窗关闭时自动把选中的时间同步到time变量里，根本不需要手动调用save方法。你可以直接在弹窗的关闭事件里处理后续逻辑，比如：

<v-dialog 
  ref="dialog" 
  v-model="modal2" 
  :return-value.sync="time" 
  persistent 
  lazy 
  full-width 
  width="290px"
  @close="handleTimeSaved"
>
  <!-- 弹窗内部的时间选择器 -->
  <v-time-picker v-model="time"></v-time-picker>
  <!-- 确定按钮直接关闭弹窗即可 -->
  <v-btn @click="modal2 = false">确定</v-btn>
</v-dialog>

然后在methods里定义处理保存的方法：

methods: {
  handleTimeSaved() {
    console.log('选中的时间已经同步啦：', this.time);
    // 这里写你的保存逻辑就行
  }
}

• 检查ref的指向是否正确：确保ref="dialog"确实绑定在v-dialog组件上，而不是嵌套的其他元素（比如内部的卡片或按钮）。如果$refs.dialog拿到的不是v-dialog实例，自然找不到save方法哦。

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