Vue3/Quasar中q-popup-edit内联条件触发scope.set失效问题咨询

原因分析 #

你遇到的问题核心是函数引用 vs 函数调用的区别：

• 当你写@keyup.enter="scope.set"时，Vue会把scope.set这个函数绑定为事件处理器，触发回车事件时会自动调用它。
• 但在三元表达式1==1 ? scope.set : ''里，条件为真时只是返回了scope.set这个函数的引用，并没有主动调用它。而console.log(1)是直接执行了函数调用（带括号），所以能正常打印。

解决方案 #

有两种可行的写法：

1. 直接在三元表达式里调用函数

把scope.set改成scope.set()，确保条件满足时主动执行方法：

@keyup.enter="1==1 ? scope.set() : void 0"

用void 0代替空字符串''是更规范的写法，避免返回无用值。

2. 抽离成组件方法（推荐）

如果条件逻辑复杂，把判断逻辑放到组件的方法里更清晰易维护：

<template>
  <q-popup-edit ... @keyup.enter="handleEnterSubmit(scope)">
    <!-- 弹窗内容 -->
  </q-popup-edit>
</template>

<script setup>
const handleEnterSubmit = (scope) => {
  // 替换成你的实际判断条件
  if (1 === 1) {
    scope.set()
  }
}
</script>

逻辑验证 #

你可以自行测试验证：

• 写@keyup.enter="console.log(scope.set)"，控制台会打印出scope.set这个函数本身，而非执行它；
• 写@keyup.enter="scope.set()"，就能直接触发提交，和直接绑定scope.set的效果完全一致。

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