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

Posted 2023-02-23

【中文标题】如何从Vue中的多维数组中提取数据？

【英文标题】：How to extract data from a multidimensional array in Vue?

【发布时间】：2020-09-29 18:47:46

【问题描述】：

我是 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。

【问题讨论】：

你试过v-for="(results,index) in maindata.results" 吗？

【参考方案1】：

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

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