如何从Vue中的多维数组中提取数据？

Question

我是 Vue 的新手。

我正在使用 Axios 从外部 API 获取数据：

import axios from 'axios'
var headers = {
    'Content-Type': 'application/json'
}
const api = 'https://avoindata.prh.fi/tr/v1/3132320-8'

methods: {
  onSubmit: function (event) {
  axios.get(api, headers)
    .then((response) => {
      this.maindata = response.data
      console.log(JSON.stringify(response.data))
    })
    .catch(e => {
      this.errors.push(e)
    })
}},

收到 Axios 的回复后：

.then((response) => {
      this.maindata = response.data

我只能从maindata（数组）读取数据：

<ul >
    <li> Type: {{ maindata.type }}</li>
    <li> Version: {{ maindata.version }}</li>
</ul>

但不是数组results 下面：

<ul v-for="(results, index) in maindata" v-bind:key="index">
  <li> BusinessID: {{ results.businessId }}</li>
</ul> 

使用以下内容：

data () {
    return {
        maindata: [
        {
           type: '',
           version: '',
           results: [{
               businessId: '',
               name: ''
           }]
       }]
    …
    }
}

JSON 看起来像这样：

{
"type": "fi.prh.opendata.tr", 
"results":
    [
        { 
            "businessId":"3132320-8",
            "name":"Uracom 
        }
    ]
}

问题：如何从results 数组中提取数据？

感谢 MikroMike。

Answer 1

你的v-for 错了，试试这个：

<ul v-for ="(result, index) in maindata.results"
  v-bind:key="index">
 <li> BusinessID: {{ result.businessId }}</li>
 </ul>