在 vue js 视图中显示数组的数据答案

【问题标题】：Display data of array in vue js view在 vue js 视图中显示数组的数据
【发布时间】：2020-12-12 11:23:48
【问题描述】：

这是我的控制器功能

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

【问题讨论】：

有错误提示吗？
不，没有错误信息！！事实上，如果我检查控制台，则会在>> Object { teams: Getter & Setter, ... } 中获取数据。但我无法在我的组件视图中显示它。
如果我设置 {{team[0] .team_name}} 它将结果显示为我的第一个团队详细信息但是如果我想显示所有团队的表格该怎么办！

标签： arrays json laravel vue.js

【解决方案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>

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

【讨论】：