Question

这是我的控制器功能

   $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, … }

如果我进一步单击对象“”

ob ：对象{值：{…}，dep：{…}，vmCount：0}
团队：（6）[…

以及更多团队

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>

Answer 1



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

这是必需的，它解决了我的问题！！

在Vue JS视图中显示数组的数据

1 个答案: