Retrieving data from two different sources to fill <tr> in table javascript/Vue.js

Question

Good day developers ... im trying to get data from two different sources in order to fill a tr , using v-for.My idea was using 2 v-for referring two different sources but the result isnt the right one .

lets say i got this 2 data sources

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

then on my html tag trying to build my table i set this

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

My ideal result would be a table like this :

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

Is possible to improve this using two v-for to fill a same row ? thanks in advance!!!!

Answer 1

It's not recommended to use span as direct child of tr so try to use onetd to render a data in given index :

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