Jira Backlog数据在Vue组件渲染后列表不更新怎么办？

皇甫佳沫提问于 2026-02-08 19:04:27 阅读 23

工具

我在用Vue做Jira集成页面时遇到问题，从Backlog接口获取的数据在组件渲染后一直显示为空。

我按文档写了个请求，用axios获取数据后赋值给items数组，但页面就是不刷新。控制台打印数据是正常的，v-for也写对了，这是为什么？


<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.summary }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    axios.get('/api/jira/backlog')
      .then(response => {
        this.items = response.data.issues  // 这里可能有问题？
        console.log(this.items)  // 打印显示数据正常
      })
  }
}
</script>

尝试过把axios换成箭头函数，也试过用Vue.set，但都不起作用。Jira接口返回的结构是{issues: […]}，数据确实存在…

Jira

我来解答赞 7 收藏

反馈

2 条解答

明礼 Lv1

问题出在响应式更新上，Jira返回的数据结构可能让Vue检测不到变化。把赋值改成这样：

this.items = [...response.data.issues]

或者用nextTick强制刷新：

import { nextTick } from 'vue'

// ...

axios.get('/api/jira/backlog')

  .then(response => {

    this.items = response.data.issues

    nextTick(() => {})

  })

就这样。

2026-02-15 12:28

IT人庆芳 Lv1

你这个问题是典型的异步数据更新视图失败，Vue 2 对数组直接赋值有时不会触发响应式更新。把 this.items = response.data.issues 换成 this.$set(this, 'items', response.data.issues) 或者确保 items 被正确监听。

更简单的办法是提前在 data 里初始化成 null，或者用解构赋值触发响应式：

this.items = [...response.data.issues]

这样就能强制 Vue 检测到变化，列表就会正常更新了。

2026-02-08 21:03