v-show vue中的未定义错误

Question

在我的 Vue 2.0 .vue 组件文件中，我有两个“条件”，根据它们何时变为真，我将它们展示给用户。我有一个按钮来切换

<tr v-show="showMonth" v-for="player in players">
  <td><input type="checkbox"></td>
  <td>{{ player.name }}</td>
  <td>{{ player.stats.month.goals }}</td>
  <td>{{ player.stats.month.assists }}</td>
  <td>{{ player.stats.month.played }}</td>
</tr>
<tr v-show="showYear" v-for="player in players">
  <td><input type="checkbox"></td>
  <td>{{ player.name }}</td>
  <td>{{ player.stats.year.goals }}</td>
  <td>{{ player.stats.year.assists }}</td>
  <td>{{ player.stats.year.played }}</td>
</tr>

请记住，每个<tr>...</tr> 仅在使用“切换”showYear 或 showMonth 时才会被填充（从 api 获取数据）。现在，当切换 showYear 时出现问题，然后 player.stats.month 在 showMonth 中需要 <tr>...</tr> 抛出错误“player.stats.month 未定义”。无论如何我可以解决这个问题吗？

Answer 1

将v-show 替换为v-if，它会工作，因为它只会在应该渲染的时候渲染。 v-show 仅更改可见性，当 v-if 仅在 true 时将其放入 DOM。