Question

我只是第一次学习Vue.js和API，但无法正确显示我解析的数据。

它拉入所有信息，但是在执行时会显示其中一个的输出和该数组中的所有内容，然后显示第二个的所有信息。

代码如下：

<template>
  <div class="users">
    <h1> Users </h1>
    <p v-for="user in heroes">Hero Name: {{user.localized_name}}</p><p v-for="user in users">Hero: {{user.hero_id}} User Lane Role: {{user.lane_role}} Games Played: {{user.games}} Games Won: {{user.wins}}</p>
    <button v-on:click="deleteUser(user)">X</button>
  </div>
</template>

<script>

export default {
  name: 'users',
  name: 'heroes',

  data() {
    return {
      newUser: {},
      users: [],
      newHero: {},
      heroes: [],
    }
  },

  methods: {
    addUser: function(e) {
      this.users.push({
        name: this.newUser.lane_role,
        email: this.newUser.games,
        website: this.newUser.wins,
        heroid: this.newUser.hero_id,
        contacted: false
      });
      e.preventDefault();
    },

    deleteUser: function(user) {
      this.users.splice(this.users.indexOf(user), 1);
    }
  },

  created: function() {
    this.$http.get('https://api.opendota.com/api/scenarios/laneRoles')
    .then(function(response) {
      this.users = response.data;
    });

    this.$http.get('https://api.opendota.com/api/heroes')
    .then(function(response) {
      this.heroes = response.data;
    });
  },

  addHeroes: function(e) {
    this.users.push({
      name: this.newHero.localized_name,
      contacted: false
    });
    e.preventDefault();
  },

  deleteUser: function(user) {
    this.heroes.splice(this.heroes.indexOf(user), 1);
  }
}

</script>

<style scoped>

.contacted {
  text-decoration: line-through;
}

</style>

当前显示如下：

英雄名称：黑柳

英雄名称：Pangolier

英雄名称：绝招

英雄：1个用户通道角色：1个游戏：1559个游戏赢了：593

英雄：1个用户通道角色：2个游戏：1277个游戏赢了：755

英雄：1个用户通道角色：3玩过：403游戏赢了：95

但是我希望它显示如下内容：

英雄姓名：暗柳用户通道角色：1玩过：1559游戏赢了：593

英雄姓名：Pangolier User Lane角色：2玩过：1277赢得了：755

这是从两个不同的API中提取数据，因为在第一个API中，它仅具有英雄ID而没有名称。如果我可以以某种方式使函数解析到某个ID（我将其替换为英雄名称），则可能会更好。

例如：如果{{user.hero_id}} == 1则显示暗柳。

Answer 1

嵌套2个模板，并使用查找方法来模拟联接。不确定这种关系；您可能必须先循环用户。关键是在渲染任何元素之前，您可以访问内部模板中的两个对象，并且不能同时合并这两个对象。

<div>
  <template v-for="hero in heroes">
    <template v-for="user in users(hero)">
      {{hero}} - {{user}}
    </template>
  </template>
</div>

使用Vue.js处理API数据

1 个答案: