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

Question

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

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

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

看起来像这样：

1. 我在 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> 

1. 然后我需要发出另一个 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
      }

1. 最后，对于有性能 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

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

Answer 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>