从两个不同的来源检索数据以填充表 javascript/Vue.js 中的 <tr>

Question

开发人员好日子...我正在尝试使用 v-for 从两个不同的来源获取数据以填充 tr。我的想法是使用 2 v-for 引用两个不同的来源，但结果不是正确的。

假设我有这 2 个数据源

all_games=[
{game_id: 1, game_player: messi},
{game_id: 2, game_player: cr7},
{game_id: 3, game_player: Roni},
{game_id: 4, game_player: Ibra},

]
lastGameStatus=[ "Looses", "Wins", "Wins", "Looses"]

然后在我的 html 标签上尝试构建我的表格我设置了这个

<v-simple-table>
        <template>
          <thead>
            <th>Game #</th>
            <th>Game Player</th>
            <th>Game Status</th>
          </thead>
          <tbody >
            <tr v-for="(game,index) in all_games" :key="index"  >
              <td> # {{game.game_id}}</td>
              <td> {{game.game_player}}</td>
              =======UNTIL HERE BEING RENDERED TO THE MAIN DATA SOURCE THE TABLE FILLS PERFECT===
              
             <span v-for="(value1, index1) in lastGameStatus" :key="index1" >
                <td >
                  {{value1}}
                </td>
              </span>=======THEN HERE TRYING TO USE A SECOND V-FOR ON A SPAN TO ROLL A 3rd <td> I GOT THE PROBLEM=====
                
            </tr>
          </tbody>
        </template>
      </v-simple-table>

我的理想结果是这样的表格：

Game#        Game Player     Game status
----------------------------------------
#1            messi          Looses
#2            cr7            Wins
#3            Roni           Wins
#4            Ibra           Looses

是否可以使用两个 v-for 填充同一行来改进这一点？ 提前谢谢！！！！

Answer 1

不建议将span 用作tr 的直接子级，因此请尝试使用一个td 来呈现给定索引中的数据：

 <td >
    {{lastGameStatus[index]}}
</td>