Vue使用键值使axios GET并显示数组中的数据？

Posted 2023-02-22

【中文标题】Vue使用键值使axios GET并显示数组中的数据？

【英文标题】：Vue make axios GET and display data from array using key value?

【发布时间】：2020-12-13 06:49:04

【问题描述】：

我有一张用户资料卡，它在方框中显示不同的测量值，例如温度、体积和重量。

目前我正在从 axios GET 请求中获取每个用户的名称，然后我需要获取该数据中的 ID 并使用 ID 执行另一个 GET 请求，该 ID 为我提供了性能数据，在我得到的数据中一个性能 ID，我需要使用它来获取最终的测量数据数组。

我想知道如何仅为具有性能 ID 的用户发出最后一个 GET 请求，然后获取测量数据并显示在每个测量框的每个用户配置文件（具有测量数据）中?

看起来像这样：

我在 vuex 中发出第一个 axios 请求，并使用 v-for 显示每个用户名： GET api/profiles 返回：

"data": [
        
            "id": 1,
            "name": "Joe",
        ,
        
            "id": 2,
            "name": "Max",
        ,  

<div class="outer"  v-for="(item, index) in profiles" :key="item.id" >
 <p> User Name:  item.name </p> 

然后我需要发出另一个 GET 请求以获得性能： GET api/performance/profileID 只为拥有（其他用户返回空数据对象）的用户返回：

mounted() 
this.$store.state.profiles.forEach((item, index) => 
        axios.get('api/performance/' + this.profile[index].id)
            .then(response => 
            this.performanceId = response.data.data.id
          )
    );

 "data": 
        "id": 1,
        "profile_id": 2,
        .....other keys and values
      

最后，对于有性能 ID 的用户，我需要获取测量结果： GET api/measurements/profileID/performanceID 返回：

"data": 
        "profileID": "2",
        "perfomanceID": "1",
        "data": [
            
                "key": "temp",
                "data": "37",
            ,
            
                "key": "vol",
                "data": "22",
            ,
            
                "key": "weight",
                "data": "200",
            ,

然后我希望每个数据点都显示在框中：

<div class="outer"  v-for="(item, index) in profiles" :key="item.id" >
    <p> User Name:  item.name </p> 
    <div class="box 1">Temperature: </div>
    <div class="box 2">Volume: </div>
    <div class="box 3">Weight: </div>
</div>

It would like this for Max's profile:
User Name: Max
  Temperature: 37
  Volume: 22
  Weight: 200

任何帮助将不胜感激，谢谢！

【参考方案1】：

如果我理解正确的话，我会这样做。

假设除了首先发出请求之外，没有其他方法可以检查用户是否有性能 ID，您可以使用 data() 属性，例如默认设置为 false 的 hasPerformanceDetails。查询 API 以获取性能 ID 后，您可以检查它是否返回任何内容，如果确实返回，则只需将 hasPerformanceDetails 设置为 true。然后，您只需使用 v-if 或 v-show 指令渲染配置文件的各个部分以及性能详细信息。

类似的东西

data() 
  return  hasPerformanceDetails: false 
,
created() 
  this.populateProfile()
,
methods: 
  populateProfile() 
    // Call the measurements endpoint and check if response is empty or not
    if (apiResponse != null) 
      this.hasPerformanceDetails = true;
    
  

在你的<template>

<div class="outer" v-for="(item, index) in profiles" :key="item.id" >
  <p> User Name:  item.name </p>
  <div v-if="hasPerformanceDetails" class="performance-wrapper">
    <div class="box 1">Temperature: </div>
    <div class="box 2">Volume: </div>
    <div class="box 3">Weight: </div>
  </div>
</div>

请记住，最好在 created() 挂钩上调用 API，因为这是在任何内容被渲染或装入 DOM 之前。 See this answer for a reference。 Vue 会执行请求，只有当所有数据都存在时，它才会退出 created() 钩子并修改 data() 中的项目。

您也可以使用v-show。 v-if 将直接不渲染任何内容，v-show 将在 html 中包含该部分，但使用 display: none 隐藏它

或者，如果您希望 performance-wrapper div 始终存在，但只是空的，您可以改用三元运算符

<div class="outer" v-for="(item, index) in profiles" :key="item.id" >
  <p> User Name:  item.name </p>
  <div class="box 1">Temperature:  hasPerformanceDetails ? item.temp : "Not available" </div>
  <div class="box 2">Volume:  hasPerformanceDetails ? item.volume : "Not available" </div>
  <div class="box 3">Weight:  hasPerformanceDetails ? item.weight : "Not available" </div>
</div>