如何使用Vue.js访问嵌套JSON数据并通过v-for构建数据表格

我来帮你搞定这个问题！你现在的核心困扰是嵌套JSON数据的正确访问以及后续的数据筛选，咱们一步步来修正和优化你的代码：

首先，理清API返回的数据结构 #

你调用的API返回的是包含分页信息的对象，真正需要遍历的数组在response.data.results里——而不是直接把整个response.data赋值给items，这是你无法正确访问嵌套属性的关键原因！

步骤1：修正数据获取逻辑 #

在created钩子中，把this.items赋值为response.data.results，这样items就变成了可遍历的数组：

created() {
  axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61&type=5`)
    .then(response => {
      // 这里要取results数组，而不是整个data对象
      this.items = response.data.results
    })
}

步骤2：修复模板结构与嵌套属性访问 #

你的模板存在结构错误（多余的<thead>和<tbody>嵌套），同时访问嵌套属性时要注意可选链操作符（?.）的使用，避免因某个层级属性不存在导致页面报错：

<template>
  <div id="app">
    <!-- 先添加筛选输入框 -->
    <input 
      type="text" 
      placeholder="按id/文档链接筛选" 
      v-model="searchText"
      style="margin-bottom: 10px;"
    />

    <table border="1"> <!-- 添加border方便查看表格结构 -->
      <thead>
        <tr>
          <th>id</th>
          <th>英文文档链接</th>
          <th>日期</th>
        </tr>
      </thead>
      <tbody>
        <!-- 遍历过滤后的数组 -->
        <tr v-for="item in filteredItems" :key="item.id">
          <td>{{ item.id }}</td>
          <!-- 使用可选链避免属性不存在时报错 -->
          <td>{{ item.downloadable?.document_en }}</td>
          <!-- 补充完整日期字段，假设API返回的日期字段是date -->
          <td>{{ item.date }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

步骤3：实现数据筛选功能 #

通过计算属性处理筛选逻辑，让数据实时响应搜索框的输入：

<script>
import axios from 'axios';
export default {
  data() {
    return {
      items: [],
      searchText: '' // 绑定搜索框的输入文本
    }
  },
  created() {
    axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61&type=5`)
      .then(response => {
        this.items = response.data.results
      })
  },
  computed: {
    filteredItems() {
      if (!this.searchText) return this.items; // 无搜索内容时返回全部数据
      const keyword = this.searchText.toLowerCase();
      // 根据id、文档链接或日期筛选，可根据实际需求调整字段
      return this.items.filter(item => {
        return (
          item.id.toString().includes(keyword) ||
          (item.downloadable?.document_en || '').toLowerCase().includes(keyword) ||
          (item.date || '').toLowerCase().includes(keyword)
        )
      })
    }
  }
}
</script>

关键改动说明 #

• 数据赋值修正：将response.data改为response.data.results，确保items是可遍历的数组
• 模板结构优化：移除多余的<thead>和<tbody>嵌套，让表格结构符合HTML规范
• 嵌套属性安全访问：使用?.可选链操作符，防止因downloadable不存在导致页面崩溃
• 筛选功能实现：通过计算属性filteredItems实时过滤数据，绑定搜索框实现动态筛选

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