Javascript Vue是否让axios使用键值从阵列获取和显示数据？

我有一张用户档案卡，可以在盒子里显示不同的测量值，比如温度、体积和重量

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

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

它看起来像这样：

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

获取api/profiles

返回：

最后，对于具有性能ID的用户，我需要获得测量值：

获取api/measurements/{profileID}/{performanceID}

返回：

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

<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

用户名：{{item.Name}}

温度：
卷：
重量：
它希望Max的个人资料如下：
用户名：Max
体温：37
卷：22
体重：200

---

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

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

假设除了首先发出请求之外，无法检查用户是否具有性能ID，则可以使用

data（）

prop，例如默认设置为

false

的

hasPerformanceDetails

。在查询API的性能ID后，可以检查它是否返回了任何内容，如果它只是将

hasPerformanceDetails

设置为

true

。然后，您只需使用性能数据呈现配置文件的各个部分使用

v-if

或

v-show

指令进行故障诊断

像这样的

data（）{
返回{hasPerformanceDetails:false}
},
创建（）{
this.populateProfile（）
},
方法：{
populateProfile（）{
//调用测量端点并检查响应是否为空
如果（apiResponse！=null）{
this.hasPerformanceDetails=true；
}
}
}

在您的

用户名：{{item.Name}

温度：
卷：
重量：

请记住，最好在

created（）

钩子上调用API，因为这是在任何东西呈现或装入DOM之前。Vue将执行请求，并且只有当所有数据都存在时，它才会退出

created（）

钩子并修改

data（）

中的项目

您也可以使用

v-show

，

v-if

将不会直接渲染任何内容，

v-show

将在HTML中显示该部分，但使用

display:none

或者，如果希望

性能包装器

div始终存在，但只是空的，则可以使用三元运算符

用户名：{{item.Name}

温度：{{hasPerformanceDetails？item.temp:“不可用”}
卷：{{hasPerformanceDetails？item.Volume:“不可用”}
权重：{{hasPerformanceDetails？item.Weight:“不可用”}

只是想澄清一下，第一个请求提供了一个用户列表及其ID，第二个请求提供了特定用户的详细信息，第三个请求提供了特定用户的“性能详细信息”？为什么第一个请求不返回用户的性能ID？是的，完全正确！最后一个请求提供了所有度量值，我需要性能ID来获取它们。我希望是这样id，我正在使用一个api，这就是它给我的方式。非常感谢，这很好！但是我如何显示具体的细节呢？比如如果我返回数据[{key:“temp”data:“38”，}，{key:“vol”，“data:“22”}]我想在温度框中显示38，在体积中显示22，无论哪个用户返回数据。否则，如果用户没有返回数据，我只需要一个空框。好的，与显示用户名的方式相同。将性能数据保存到

profiles

对象中，并根据需要引用每个键。如果您想显示

 性能包装器

div只有空的详细信息，请让我知道，我会修改我的回答非常感谢！！是的，如果没有数据，我希望它为空，非常感谢添加它！同样为了在配置文件中保存性能数据，配置文件在vuex中会有区别吗？如果它在vuex存储中，你可以从何处保存它就更好了在这种情况下，您需要混响，并在需要性能详细信息时访问存储。长期而言，性能会更好，因为API调用会更少

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

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
      }

"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