接口返回数据
{
"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>