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

Question

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

假设我有这 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 标签上尝试构建我的 table 我设置了这个

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

我理想的结果是这样 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>

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

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

javascript

vue.js

vue-component

vuejs2

v-for