Atlassian Forge解析器向Vue自定义UI返回值时Promise回调未触发

Atlassian Forge 自定义UI不强制要求必须使用React，Vue、原生JavaScript等任意前端技术栈都可以正常和Forge解析器交互，问题和框架选型无关，是日志查看位置错误+Vue响应式使用不当导致的。

• 日志查看位置错误：解析器侧的日志是运行forge tunnel的终端输出的后端日志，Vue代码里then/catch分支的console.info属于前端日志，只会输出在浏览器开发者工具的Console面板，在终端里看不到这部分输出，实际上回调大概率已经正常执行。
• 变量作用域与响应式错误：mounted钩子内用var声明的jiraKey是函数内局部临时变量，既不是Vue组件的响应式状态，也没有绑定到模板，哪怕回调执行给它重新赋值，既不会触发页面更新，也没法在组件其他位置读取到赋值后的值，容易让人误以为回调未执行。

现有Resolver代码逻辑正确，无需修改，只需要调整Vue侧代码，把需要渲染的值定义为响应式状态即可，参考Vue3写法：

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { invoke } from '@forge/bridge'    

export default defineComponent({
  setup() {
    // 定义响应式状态，值变化会自动同步到视图
    const jiraKey = ref<string>('Retrieving jira key')

    onMounted(() => {
      invoke<string>('getIssueKey')
        .then((data) => {
          // 这个日志要打开浏览器开发者工具查看
          console.info('Invoke success, got key:', data)
          jiraKey.value = data
        })
        .catch((err) => {
          console.error('Invoke failed:', err)
          jiraKey.value = 'Error retrieving jira key'
        })
    })

    return { jiraKey }
  }
})
</script>

<template>
  <div>当前Jira Issue Key：{{ jiraKey }}</div>
</template>

如果调整后仍有问题，按顺序检查：

• 本地开发时forge tunnel处于正常运行状态，无断连
• 执行npm install @forge/bridge@latest将桥接依赖更新到最新版本，版本不兼容偶尔会导致invoke调用卡住不返回，更新后重启tunnel、刷新页面重试
• 项目manifest.yml中权限配置正确，已申请对应Issue的读取权限

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