时间戳

首页 > 解决方案 > 在 vue js 视图中显示数组的数据

arrays - 在 vue js 视图中显示数组的数据

问题描述

这是我的控制器功能

   $teams= ChallengeTeam::where('challenge_id', '=', $id) 
                ->join('users AS leader', 'challenge_teams.team_leader_id', '=', 'leader.id')
                ->join('users AS captain', 'challenge_teams.team_captain_id', '=', 'captain.id')
                ->select(
                    'leader.first_name AS leader_first_name',
                    'leader.last_name  AS leader_last_name',
                    'challenge_teams.id',
                    'challenge_teams.team_name',
                    'captain.first_name AS captain_first_name',
                    'captain.last_name AS captain_last_name',
                    'challenge_teams.unique_id',
                    'challenge_teams.avatar'
                )
        ->get();

        foreach($teams as $team) {
            $t = ChallengeTeam::find($team->id);
            $members = $t->members()
                    ->join('users', 'challenge_team_members.user_id', 'users.id')
                    ->select(
                        'users.first_name',
                        'users.last_name',
                    )
                    ->get();

            $team['members'] = $members;
        }

        return response()->json([
            'teams' => $teams,
        ], 200);

它给我的结果是>>Object { teams: Getter & Setter, … }

如果我进一步点击对象，```

  1. ob : Object { value: {…}, dep: {…}, vmCount: 0 } ​</li>
  2. 团队：(6) […</li>

并在团队中进一步

0: Object { leader_first_name: Getter & Setter, leader_last_name: Getter & Setter, id: Getter & Setter, … }
​​
1: Object { leader_first_name: Getter & Setter, leader_last_name: Getter & Setter, id: Getter & Setter, … }
​​
2: Object { leader_first_name: Getter & Setter, leader_last_name: Getter & Setter, id: Getter & Setter, … }
​​
3: Object { leader_first_name: Getter & Setter, leader_last_name: Getter & Setter, id: Getter & Setter, … }
​​
4: Object { leader_first_name: Getter & Setter, leader_last_name: Getter & Setter, id: Getter & Setter, … }
​​
5: Object { leader_first_name: Getter & Setter, leader_last_name: Getter & Setter, id: Getter & Setter, … }

这是我得到它的功能

 loadTeams(challengeId) {
                axios.get("/api/auth/admin/challenge/" + challengeId + "/teams") 
                .then(function (response) {
                this.teams = response.data;
                console.log(this.teams)
                }.bind(this)); 
            },

但每当我试图展示它时，它就不会出现

   <tr v-for="team in teams" :key="team.id">
                                <td class="font-w600">{{team.team_name}}</td>
                                <td class="">{{team.leader_first_name }} {{team.leader_last_name }}</td>
                                <td class="">{{team.captain_first_name}} {{team.captain_last_name}}</td>
                                <td class="">{{ team.unique_id}}</td>
   </tr>

标签： arraysjsonlaravelvue.js

解决方案



<tbody v-for="team in teams" :key="team.id">                  
          <tr v-for="t in team" :key="t.id">
               <td>
                   <img :src="getAvatar(t.avatar)" class="img-thumbnail" width="75" alt="no image found" />
               </td> 
               <td class="font-w600">{{t.team_name}}</td>
               <td class="">{{t.leader_first_name }} {{t.leader_last_name }}</td>
               <td class="">{{t.captain_first_name}} {{t.captain_last_name }}</td>
               <td class="">{{ t.unique_id}}</td>
          </tr>
</tbody>

这是需要的东西，它解决了我的问题！

推荐阅读