通过“计算属性”获取对象深层数据

接口返回数据

	{
		 "data": [
		    {
			    "data": {
			      "datum": {
			        "process_params": {
			          "control": {
			            "control": "video-genius",
			            "text": "原生式"
			          }
			        },
			      },
			      "status": "success",
			    },
			    "query": "小飞机"
			},
			{...},
			{...}
		],
		"message": "success",
		"status": 200
    }

<template>
  <div>
    <div v-for="(item, index) in data" :key="index">
      <div>{{ item.query }}</div>
      <div>{{ item.data.status }}</div>
      <div>{{ item.data.percent }}</div>
      <div>{{ item.data.datum.status }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: []
    }
  },
  mounted() {
    // 在此处发起接口请求并将数据保存到data中
    // 这里使用axios作为示例，你需要按照实际情况修改请求地址和参数
    axios.get('/api/data')
      .then(response => {
        this.data = response.data.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

上述代码中，我们首先在 data() 中定义了一个 data 属性来保存接口返回的数据。在 mounted() 中发起了一个异步请求来获取数据，当数据获取成功后，将其保存到 data 属性中。然后在页面上使用 v-for 指令遍历数据并将其渲染到页面上。

你可以根据你的需要自定义模板中显示的数据。例如，上述例子中，我们将接口返回的数据中的 query， data.status， data.percent 和 data.datum.status 属性渲染到页面上。你可以根据实际情况修改这些属性，或者添加其他属性来显示。

获取datum数据

如果您想要获取datum中的数据，可以在data属性中添加一个计算属性，用于从data中获取datum，如下所示：

computed: {
  // 获取 data 中的 datum
  datumList() {
    return this.data.map(item => item.data.datum);
  }
}

然后在模板中可以通过 datumList 访问 datum 中的数据：

<template>
  <div>
    <ul>
      <li v-for="(datum, index) in datumList" :key="index">
        <div>Status: {{ datum.status }}</div>
        <div>Result text: {{ datum.result_text }}</div>
        <div>Result video: {{ datum.result_video }}</div>
        <div>Size: {{ datum.size }}</div>
        <div>Time: {{ datum.time }}</div>
      </li>
    </ul>
  </div>
</template>