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

Question

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

目前，我正在从axios GET请求中获取每个用户的名称，然后我需要获取该数据中的ID，并使用该ID执行另一个GET请求，该ID为我提供性能数据，在该数据中，我获得了一个性能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> 

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

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

Answer 1

如果我没弄错的话，我会这么做的。

假设除了先发出请求之外，没有办法检查用户是否具有性能ID，那么您可以拥有一个data（）prop，例如，默认情况下，它被设置为false。一旦您查询API的性能ID，您就可以检查它是否返回了任何内容，以及它是否只是将hasPeractice细节设置为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;
    }
  }
}

在你的代码中

<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（）hook上调用API，因为这是在任何东西呈现或装入DOM之前。参考此答案。Vue将执行该请求，并且只有在所有数据都存在后，它才会退出created（）钩子并修改data（）中的项目。

你也可以使用v-show.v-if将直接不呈现任何内容，v-show将具有超文本标记语言中的部分，但使用show隐藏它：无

或者，如果您希望性能包装器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>