Jira看板状态列怎么和Vue组件联动？

极客爱香提问于 2026-03-14 10:23:21 阅读 7

工具

我们团队用Jira做Scrum看板，现在想在内部Vue项目里同步显示任务状态列（比如To Do、In Progress、Done），但不知道怎么把Jira的列配置映射到前端组件里。

我试过直接写死三列，但Jira那边列名一改，页面就对不上了。有没有办法动态获取Jira看板的列信息并渲染？

目前代码是这样硬编码的：

<template>
  <div class="board">
    <div v-for="col in ['To Do', 'In Progress', 'Done']" :key="col">
      <h3>{{ col }}</h3>
      <!-- 任务卡片 -->
    </div>
  </div>
</template>

但这样显然不灵活，求问该怎么对接Jira API或者有其他实践方案？

我来解答赞 3 收藏

反馈

1 条解答

司徒一茹 Lv1

Jira看板的列本质上就是Statuses（状态），你可以通过Jira REST API动态获取项目配置的状态列表，而不是硬编码。

最直接的方案是调用项目的statuses接口：

// 获取项目状态列表

async function fetchProjectStatuses(projectKey) {

  const response = await fetch(/rest/api/3/project/${projectKey}/statuses);

  const statuses = await response.json();

  // 返回类似 [{ name: 'To Do', id: '10001' }, { name: 'In Progress', ... }]

  return statuses;

}

然后在你的Vue组件里改成这样：

<template>

  <div class="board">

    <div v-for="status in columns" :key="status.id" class="column">

      <h3>{{ status.name }}</h3>

      <!-- 任务卡片 -->

    </div>

  </div>

</template>



<script>

export default {

  data() {

    return {

      columns: []

    };

  },

  async mounted() {

    const statuses = await fetchProjectStatuses('YOUR_PROJECT_KEY');

    this.columns = statuses;

  }

};

</script>

这样Jira那边改列名或者增删状态，这边自动就同步了。

需要注意的几点：

Jira API需要认证，记得在请求头带上Basic Auth或者OAuth token。生产环境建议后端代理请求Jira API，避免前端直接暴露凭证。

如果你用的是Jira Cloud，API路径是 /rest/api/3/，如果是Server版可能路径略有不同。

另外Jira的Statuses和Workflow里的状态转换是两码事，如果你的看板列还涉及到Workflow配置（比如某些状态在特定列不允许移动），可能需要额外调用 /rest/api/3/project/{projectKey}/workflow 来获取更完整的配置，不过大多数场景下用statuses接口就够了。

2026-03-14 11:03