如何通过按下Enter键打开Quasar QPopUpEdit而非点击触发？

核心问题点 #

你的代码存在两个关键疏漏：

1. Vue3中模板ref的组件实例存储在ref变量.value中，直接调用popUp.show()会因找不到实例报错，必须使用popUp.value.show()
2. QPopUpEdit必须绑定v-model到父组件变量，否则组件内部状态异常，show()方法无法正常触发

修正后的完整代码 #

模板部分 #

<template>
  <div>
    <!-- 绑定v-model到父组件变量，为弹窗提供初始值 -->
    <q-popup-edit v-model="editValue" v-slot="scope" auto-save ref="popUp">
      <q-input v-model="scope.value" autofocus />
    </q-popup-edit>
    <!-- 测试触发按钮 -->
    <q-btn label="打开弹窗编辑" @click="enterPressed" />
  </div>
</template>

Script部分（Composition API） #

<script setup>
import { ref } from 'vue'

// 声明绑定变量，为QPopUpEdit提供初始状态
const editValue = ref('初始内容')
const popUp = ref(null)

const enterPressed = () => {
  // 先判断实例是否挂载，避免undefined报错
  if (popUp.value) {
    popUp.value.show()
  }
}
</script>

额外注意事项 #

• 若使用Options API，模板ref实例直接通过this.$refs.popUp获取，调用this.$refs.popUp.show()即可
• 确保组件完成挂载后再调用show()，比如通过用户交互触发（如按钮点击），避免在组件未初始化时执行

内容的提问来源于stack exchange，提问作者Tamás László