Vue.js Can'；使用VueJS访问嵌套JSON

我是vueJS的新手，我一直在尝试如何访问“figures”数组中的数据。这个JSON数据结构嵌套在我从API访问的另一个JSON中。我一直在尝试在线查找信息，以帮助我找到解决这个问题的最佳方法。我已经在script标签中添加了这些信息，希望这有助于让您更容易理解。如果需要更多信息，请告诉我

{
contributors: [ ],
create_dt: "2013-08-14T11:16:00.000Z",
image_attributes: null,
cited_by: "",
description: null,
figures: [
{
id: 130,
identifier: "decisionmaking-framework",
title: "Decision-Making Framework",
caption: "information on topic here",
details: null,
time_start: null,
time_end: null,
lat_max: null,
lat_min: null,
lon_max: null,
lon_min: null,
usage_limits: "more information here.",
submission_dt: null,
create_dt: "2013-08-14T11:16:00.000Z",
source_citation: "citation information",
ordinal: "3",
url: "http://www.google.com/placeholder",
_origination: null,
created_at: "2020-02-25T15:24:36.799Z",
updated_at: "2020-02-25T15:24:36.799Z",
report_id: 2040,
chapter_id: 514,
chapter_identifier: "decision-support",
report_identifier: "identifier1",
attributes: null
}
]

VueJS HTML模板

<template>
  <div id="card" class="card col-md-10 offset-1">

      <b-table :items="figures" fields="fields">
        <template>
        <h4>{{figures.title}}</h4>
        <p>{{figures.identifier}}</p>
        </template>
      </b-table>
   </div>
</template>

{{图.标题}
{{figures.identifier}}

从“axios”导入axios
从“Vue/dist/Vue.js”导入Vue；
从“../../parts/modules.js”导入RenderPage
导出默认值{
名称：“imageShow”，
数据：函数（）{
返回{
字段：[
{key:'identifier'，label:'identifier}，{key:'title'，label:'title}]，
数字：[]，
图像计数：2，
当前页面：1，
objectName:location.pathname.substring（1）
}
}

您可以使用v-for，这更常见（示例1）

或者也可以传递其他组件的道具（示例2）

加载数据
例1
{{figure.title}}
或者，示例2
导出默认值{
名称：“应用程序”，
数据：（）=>({
记录：[]，
字段：['identifier'，'title']，
}),
方法：{
loadData（）{
//从API加载
//对于测试，我手动加载
这是我的记录({
贡献者：[]，
创建“2013-08-14T11:16:00.000Z”，
图像属性：null，
引用人：''，
description:null，
数字：[
{
身份证号码：130，
标识符：“决策框架”，
标题：“决策框架”，
标题：“此处的主题信息”，
详细信息：空，
开始时间：空，
时间结束：空，
lat_max:null，
lat_min:null，
lon_max:null，
lon_min:null，
用法限制：“此处有更多信息。”，
提交：空，
创建“2013-08-14T11:16:00.000Z”，
资料来源：引文：“引文信息”，
序号：“3”，
网址：'http://www.google.com/placeholder',
_来源：空，
创建于：“2020-02-25T15:24:36.799Z”，
更新地址：2020-02-25T15:24:36.799Z，
报告编号：2040，
第二章：514，
第四章“决策支持”，
报告_标识符：“identifier1”，
属性：null，
},
],
});
},
},
};

请更新格式，使JSON也位于代码块中。@alexbea JSON格式已更新。感谢您查看此答案。感谢您的回答。很抱歉，我应该提供更多详细信息。因此，该JSON数据结构是来自api的另一个JSON数据结构中的数据。此答案解决了您的问题吗？请接受这个答案将帮助其他人。

<script>
  import axios from 'axios'
  import Vue from 'vue/dist/vue.js';
  import RenderPage from '../../parts/modules.js'

  export default {
    name:"imageShow",
    data: function() {
      return {    
        fields: [
          {key:'identifier',label:"Identifier"}, {key:'title', label:"Title"}],
        figures: [],
        imageCount: 2,
        currentPage: 1,
        objectName: location.pathname.substring(1)
      }
    }
 </script>